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

package/CHANGELOG.md

@@ -1,164 +1,28 @@
 # @saas-ui/react
 
-## 2.11.2
+## 3.0.0-alpha.1
 
-### Patch Changes
-
-- 862937a: Bump chakra version
-- Updated dependencies [862937a]
-  - @saas-ui/data-table@13.0.2
-  - @saas-ui/nprogress@2.2.1
-  - @saas-ui/hotkeys@2.5.1
-  - @saas-ui/modals@2.4.2
-  - @saas-ui/forms@2.9.1
-  - @saas-ui/theme@2.6.1
-  - @saas-ui/core@2.8.1
-
-## 2.11.1
-
-### Patch Changes
-
-- Updated dependencies [a69829a]
-  - @saas-ui/hooks@2.3.0
-  - @saas-ui/modals@2.4.1
-  - @saas-ui/data-table@13.0.1
-
-## 2.11.0
-
-### Minor Changes
-
-- 803ede7: Updated Chakra UI version range to >=2.9.0 <3
-
-### Patch Changes
-
-- Updated dependencies [803ede7]
-  - @saas-ui/data-table@13.0.0
-  - @saas-ui/nprogress@2.2.0
-  - @saas-ui/hotkeys@2.5.0
-  - @saas-ui/modals@2.4.0
-  - @saas-ui/forms@2.9.0
-  - @saas-ui/hooks@2.2.0
-  - @saas-ui/theme@2.6.0
-  - @saas-ui/core@2.8.0
+### Major Changes
 
-## 2.10.5
+- 550e5a6: Upgrade to Chakra v3
 
 ### Patch Changes
 
-- c9daf50: Fixed issue where link component prop would not be passed to NavItem
-- Updated dependencies [c9daf50]
-  - @saas-ui/core@2.7.2
-  - @saas-ui/data-table@12.0.5
-  - @saas-ui/forms@2.8.2
-  - @saas-ui/hotkeys@2.4.2
-  - @saas-ui/modals@2.3.5
-
-## 2.10.4
+- Updated dependencies [550e5a6]
+  - @saas-ui/hooks@3.0.0-alpha.1
+  - @saas-ui/core@3.0.0-alpha.1
 
-### Patch Changes
+## 3.0.0-alpha.0
 
-- a863a5e: Updated package type to fix next 15 support
-- Updated dependencies [a863a5e]
-  - @saas-ui/modals@2.3.4
-  - @saas-ui/data-table@12.0.4
+### Major Changes
 
-## 2.10.3
+- v3 alpha release
 
 ### Patch Changes
 
 - Updated dependencies
-  - @saas-ui/modals@2.3.3
-  - @saas-ui/data-table@12.0.3
-
-## 2.10.2
-
-### Patch Changes
-
-- 7669720: Fixed publint issues
-- Updated dependencies [7669720]
-  - @saas-ui/modals@2.3.2
-  - @saas-ui/data-table@12.0.2
-
-## 2.10.1
-
-### Patch Changes
-
-- 5e24ec4: Fixed issue where as prop on NavItem would always be overruled by internal Link prop if href is passed
-- Updated dependencies [5e24ec4]
-  - @saas-ui/core@2.7.1
-  - @saas-ui/data-table@12.0.1
-  - @saas-ui/forms@2.8.1
-  - @saas-ui/hotkeys@2.4.1
-  - @saas-ui/modals@2.3.1
-
-## 2.10.0
-
-### Minor Changes
-
-- fc799df: Removed deprecated Chakra UI dependency
-
-### Patch Changes
-
-- Updated dependencies [fc799df]
-  - @saas-ui/hotkeys@2.4.0
-  - @saas-ui/modals@2.3.0
-  - @saas-ui/forms@2.8.0
-  - @saas-ui/core@2.7.0
-  - @saas-ui/data-table@12.0.0
-
-## 2.9.1
-
-### Patch Changes
-
-- f0ee3db: Updated to Chakra 2.10
-- Updated dependencies [f0ee3db]
-  - @saas-ui/data-table@11.0.1
-  - @saas-ui/nprogress@2.1.1
-  - @saas-ui/hotkeys@2.3.1
-  - @saas-ui/modals@2.2.1
-  - @saas-ui/forms@2.7.1
-  - @saas-ui/theme@2.5.1
-  - @saas-ui/core@2.6.1
-
-## 2.9.0
-
-### Minor Changes
-
-- 2ac496a: Upgraded to Chakra UI v2.9.3
-
-### Patch Changes
-
-- Updated dependencies [2ac496a]
-  - @saas-ui/data-table@11.0.0
-  - @saas-ui/nprogress@2.1.0
-  - @saas-ui/hotkeys@2.3.0
-  - @saas-ui/modals@2.2.0
-  - @saas-ui/forms@2.7.0
-  - @saas-ui/hooks@2.1.0
-  - @saas-ui/theme@2.5.0
-  - @saas-ui/core@2.6.0
-
-## 2.8.11
-
-### Patch Changes
-
-- 5e000e0: Removed background color from loading overlay fill variant
-- Updated dependencies [5e000e0]
-  - @saas-ui/theme@2.4.2
-  - @saas-ui/core@2.5.6
-  - @saas-ui/data-table@10.0.11
-  - @saas-ui/forms@2.6.11
-  - @saas-ui/hotkeys@2.2.14
-  - @saas-ui/modals@2.1.41
-
-## 2.8.10
-
-### Patch Changes
-
-- Updated dependencies [fc2203a]
-  - @saas-ui/forms@2.6.10
-  - @saas-ui/modals@2.1.40
-  - @saas-ui/data-table@10.0.10
+  - @saas-ui/hooks@3.0.0-alpha.0
+  - @saas-ui/core@3.0.0-alpha.0
 
 ## 2.8.9
 
@@ -2989,8 +2853,9 @@
   Add this somewhere in the root of your project.
 
   ```ts
+  import { yupFieldResolver, yupResolver } from '@saas-ui/forms/yup'
   import { Form } from '@saas-ui/react'
-  import { yupResolver, yupFieldResolver } from '@saas-ui/forms/yup' // yupResolver is exported from here as well for convenience.
+  // yupResolver is exported from here as well for convenience.
   import { AnyObjectSchema } from 'yup'
 
   Form.getResolver = (schema: AnyObjectSchema) => yupResolver(schema) // @hookform/resolvers

package/dist/chunk-32JGENDB.js

@@ -0,0 +1,19 @@
+'use client'
+
+// src/components/spinner/spinner.tsx
+import { forwardRef } from "react";
+import { Spinner as ChakraSpinner } from "@chakra-ui/react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Spinner = forwardRef(
+  function Spinner2(props, ref) {
+    const { loading, children, ...rest } = props;
+    if (loading === false) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return /* @__PURE__ */ jsx(ChakraSpinner, { ref, ...rest });
+  }
+);
+
+export {
+  Spinner
+};

package/dist/chunk-FZW2DYK3.js

@@ -0,0 +1,19 @@
+'use client'
+import {
+  CloseIcon
+} from "./chunk-VDXTEASE.js";
+
+// src/components/close-button/close-button.tsx
+import { forwardRef } from "react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import { jsx } from "react/jsx-runtime";
+var CloseButton = forwardRef(
+  function CloseButton2(props, ref) {
+    var _a;
+    return /* @__PURE__ */ jsx(ChakraIconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(CloseIcon, {}) });
+  }
+);
+
+export {
+  CloseButton
+};

package/dist/chunk-KHRLZUV4.js

@@ -0,0 +1,35 @@
+'use client'
+
+// src/provider/sui-provider.tsx
+import * as React from "react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { jsx } from "react/jsx-runtime";
+var SuiContext = React.createContext({});
+function SuiProvider(props) {
+  const { linkComponent, onError, children, ...rest } = props;
+  const context = React.useMemo(
+    () => ({
+      linkComponent
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(SuiContext.Provider, { value: context, children: /* @__PURE__ */ jsx(ChakraProvider, { ...rest, children }) });
+}
+var useSui = () => React.useContext(SuiContext);
+
+// src/provider/use-link.tsx
+import { chakra } from "@chakra-ui/react";
+function useLink() {
+  const context = useSui();
+  if (context == null ? void 0 : context.linkComponent) {
+    return context.linkComponent;
+  }
+  return chakra.a;
+}
+
+export {
+  SuiContext,
+  SuiProvider,
+  useSui,
+  useLink
+};

package/dist/chunk-KTLWEUNW.js

@@ -0,0 +1 @@
+'use client'

package/dist/chunk-PKI6YH2V.js

@@ -0,0 +1,31 @@
+'use client'
+
+// src/components/input-group/input-group.tsx
+import { cloneElement, forwardRef, isValidElement } from "react";
+import { Group, InputElement } from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputGroup = forwardRef(
+  function InputGroup2(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(Group, { ref, display: "flex", ...rest, children: [
+      startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+      isValidElement(children) && cloneElement(children, {
+        ...startElement && { ps: "calc(var(--input-height) - 6px)" },
+        ...endElement && { pe: "calc(var(--input-height) - 6px)" },
+        ...children.props
+      }),
+      endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", ...endElementProps, children: endElement })
+    ] });
+  }
+);
+
+export {
+  InputGroup
+};

package/dist/chunk-RTMS5TJN.js

@@ -0,0 +1,10 @@
+'use client'
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};

package/dist/chunk-VBIVLREP.js

@@ -0,0 +1,45 @@
+'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/dist/chunk-VDXTEASE.js

@@ -0,0 +1,117 @@
+'use client'
+
+// src/components/icons/create-icon.tsx
+import { createIcon as _createIcon } from "@chakra-ui/react";
+var createIcon = (props) => {
+  return _createIcon({
+    viewBox: "0 0 24 24",
+    defaultProps: {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    ...props
+  });
+};
+
+// src/components/icons/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChevronUpIcon = createIcon({
+  displayName: "ChevronUpIcon",
+  path: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
+});
+var ChevronDownIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+});
+var ChevronLeftIcon = createIcon({
+  displayName: "ChevronLeftIcon",
+  path: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+});
+var ChevronRightIcon = createIcon({
+  displayName: "ChevronRightIcon",
+  path: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+});
+var HamburgerIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ jsxs("g", { fill: "none", children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+  ] })
+});
+var CloseIcon = createIcon({
+  displayName: "CloseIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] })
+});
+var FilterIcon = createIcon({
+  displayName: "FilterIcon",
+  path: /* @__PURE__ */ jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
+});
+var CalendarIcon = createIcon({
+  displayName: "CalendarIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+  ] })
+});
+var PlusIcon = createIcon({
+  displayName: "PlusIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] })
+});
+var MinusIcon = createIcon({
+  displayName: "MinusIcon",
+  path: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+});
+var ViewOffIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+    /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] })
+});
+var ViewIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+});
+var SearchIcon = createIcon({
+  displayName: "SearchIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] })
+});
+var CheckIcon = createIcon({
+  displayName: "CheckIcon",
+  path: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) })
+});
+
+export {
+  ChevronUpIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  HamburgerIcon,
+  CloseIcon,
+  FilterIcon,
+  CalendarIcon,
+  PlusIcon,
+  MinusIcon,
+  ViewOffIcon,
+  ViewIcon,
+  SearchIcon,
+  CheckIcon
+};

package/dist/components/app-shell/index.cjs

@@ -0,0 +1,68 @@
+'use client'
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/app-shell/index.ts
+var app_shell_exports = {};
+__export(app_shell_exports, {
+  AppShell: () => AppShell
+});
+module.exports = __toCommonJS(app_shell_exports);
+
+// src/components/app-shell/app-shell.tsx
+var import_react = require("react");
+var import_react2 = require("@chakra-ui/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var {
+  withProvider,
+  withContext,
+  useStyles: useAppShellStyles
+} = (0, import_react2.createSlotRecipeContext)({
+  key: "appShell"
+});
+var AppShellRoot = withProvider(
+  "div",
+  "root",
+  { forwardAsChild: true }
+);
+var AppShellContent = withContext("div", "content", { forwardAsChild: true });
+var AppShellMain = withContext(
+  "div",
+  "main",
+  { forwardAsChild: true }
+);
+var AppShell = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const { header, sidebar, aside, footer, children, ...rootProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppShellRoot, { ref, ...rootProps, children: [
+      header,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppShellContent, { children: [
+        sidebar,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppShellMain, { children }),
+        aside
+      ] }),
+      footer
+    ] });
+  }
+);
+AppShell.displayName = "AppShell";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell
+});

package/dist/components/app-shell/index.d.cts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+
+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;
+}
+interface AppShellRootProps extends AppShellProps, SlotRecipeProps<'appShell'> {
+}
+declare const AppShell: react.ForwardRefExoticComponent<AppShellRootProps & react.RefAttributes<HTMLDivElement>>;
+
+export { AppShell, type AppShellProps };

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
+
+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;
+}
+interface AppShellRootProps extends AppShellProps, SlotRecipeProps<'appShell'> {
+}
+declare const AppShell: react.ForwardRefExoticComponent<AppShellRootProps & react.RefAttributes<HTMLDivElement>>;
+
+export { AppShell, type AppShellProps };

package/dist/components/app-shell/index.js

@@ -0,0 +1,45 @@
+'use client'
+import "../../chunk-RTMS5TJN.js";
+
+// src/components/app-shell/app-shell.tsx
+import { forwardRef } from "react";
+import {
+  createSlotRecipeContext
+} from "@chakra-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var {
+  withProvider,
+  withContext,
+  useStyles: useAppShellStyles
+} = createSlotRecipeContext({
+  key: "appShell"
+});
+var AppShellRoot = withProvider(
+  "div",
+  "root",
+  { forwardAsChild: true }
+);
+var AppShellContent = withContext("div", "content", { forwardAsChild: true });
+var AppShellMain = withContext(
+  "div",
+  "main",
+  { forwardAsChild: true }
+);
+var AppShell = forwardRef(
+  (props, ref) => {
+    const { header, sidebar, aside, footer, children, ...rootProps } = props;
+    return /* @__PURE__ */ jsxs(AppShellRoot, { ref, ...rootProps, children: [
+      header,
+      /* @__PURE__ */ jsxs(AppShellContent, { children: [
+        sidebar,
+        /* @__PURE__ */ jsx(AppShellMain, { children }),
+        aside
+      ] }),
+      footer
+    ] });
+  }
+);
+AppShell.displayName = "AppShell";
+export {
+  AppShell
+};