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

package/dist/theme/tokens/colors.js

@@ -0,0 +1,8 @@
+'use client'
+import {
+  colors
+} from "../../chunk-3MO37LYW.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  colors
+};

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.10",
   "description": "Saas UI - The React component library for startups.",
-  "source": "src/index.ts",
   "type": "module",
   "exports": {
     ".": {
@@ -11,6 +10,12 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.js"
     },
+    "./theme/colors": {
+      "sui": "./src/theme/tokens/colors.ts",
+      "types": "./dist/theme/tokens/colors.d.ts",
+      "require": "./dist/theme/tokens/colors.cjs",
+      "import": "./dist/theme/tokens/colors.js"
+    },
     "./*": {
       "sui": "./src/components/*/index.ts",
       "types": "./dist/components/*/index.d.ts",
@@ -33,8 +38,7 @@
     "typecheck": "tsc --noEmit"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -65,11 +69,12 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@saas-ui/core": "3.0.0-alpha.1",
-    "@saas-ui/hooks": "3.0.0-alpha.1"
+    "@ark-ui/react": "^4.4.4",
+    "@saas-ui/core": "3.0.0-alpha.4",
+    "@saas-ui/hooks": "3.0.0-alpha.4"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.0.0",
+    "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11",
     "react": ">=18",
     "react-dom": ">=18"

package/dist/chunk-VBIVLREP.js

@@ -1,45 +0,0 @@
-'use client'
-
-// ../../node_modules/@ark-ui/react/dist/utils/create-context.js
-import { createContext as createContext$1, useContext } from "react";
-function getErrorMessage(hook, provider) {
-  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
-}
-function createContext(options = {}) {
-  const {
-    name,
-    strict = true,
-    hookName = "useContext",
-    providerName = "Provider",
-    errorMessage,
-    defaultValue
-  } = options;
-  const Context = createContext$1(defaultValue);
-  Context.displayName = name;
-  function useContext$1() {
-    var _a;
-    const context = useContext(Context);
-    if (!context && strict) {
-      const error = new Error(errorMessage != null ? errorMessage : getErrorMessage(hookName, providerName));
-      error.name = "ContextError";
-      (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext$1);
-      throw error;
-    }
-    return context;
-  }
-  return [Context.Provider, useContext$1, Context];
-}
-
-// ../../node_modules/@ark-ui/react/dist/components/dialog/use-dialog-context.js
-var [DialogProvider, useDialogContext] = createContext({
-  name: "DialogContext",
-  hookName: "useDialogContext",
-  providerName: "<DialogProvider />"
-});
-
-// ../../node_modules/@ark-ui/react/dist/components/dialog/dialog-context.js
-var DialogContext = (props) => props.children(useDialogContext());
-
-export {
-  DialogContext
-};

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>
-  ),
-}