@saas-ui/react 3.0.0-alpha.16 → 3.0.0-alpha.18

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.18
+
+### Minor Changes
+
+- eb02362: Improved GridList recipe
+
+### Patch Changes
+
+- e7fe684: Export Pagination Context component
+- eb02362: Add missing PaginationPageTextProps export
+- Updated dependencies [eb02362]
+  - @saas-ui/core@3.0.0-alpha.5
+
+## 3.0.0-alpha.17
+
+### Minor Changes
+
+- a2ef175: Added Pagination component
+
 ## 3.0.0-alpha.16
 
 ### Patch Changes

package/dist/{chunk-LIYUBUOP.js → chunk-46ISJZBS.js}

@@ -2,7 +2,7 @@
 import {
   CloseIcon,
   SearchIcon
-} from "./chunk-VDXTEASE.js";
+} from "./chunk-4TPVIHNO.js";
 
 // src/components/search-input/search-input.tsx
 import React, { forwardRef } from "react";

package/dist/{chunk-VDXTEASE.js → chunk-4TPVIHNO.js}

@@ -98,6 +98,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 
 export {
   ChevronUpIcon,
@@ -113,5 +121,6 @@ export {
   ViewOffIcon,
   ViewIcon,
   SearchIcon,
-  CheckIcon
+  CheckIcon,
+  EllipsisIcon
 };

package/dist/{chunk-CB52LBJK.js → chunk-72LEGXHY.js}

@@ -1,7 +1,7 @@
 'use client'
 import {
   CloseButton
-} from "./chunk-FZW2DYK3.js";
+} from "./chunk-BKYGKH3L.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";

package/dist/{chunk-FZW2DYK3.js → chunk-BKYGKH3L.js}

@@ -1,7 +1,7 @@
 'use client'
 import {
   CloseIcon
-} from "./chunk-VDXTEASE.js";
+} from "./chunk-4TPVIHNO.js";
 
 // src/components/close-button/close-button.tsx
 import { forwardRef } from "react";

package/dist/{chunk-S3CQW7GD.js → chunk-BU7QENBQ.js}

@@ -1,7 +1,7 @@
 'use client'
 import {
   CloseButton
-} from "./chunk-FZW2DYK3.js";
+} from "./chunk-BKYGKH3L.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";

package/dist/{chunk-KK77TYNL.js → chunk-C7B3ELC4.js}

@@ -5,7 +5,7 @@ import {
 import {
   CheckIcon,
   ChevronRightIcon
-} from "./chunk-VDXTEASE.js";
+} from "./chunk-4TPVIHNO.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";

package/dist/chunk-MLJN6IOJ.js

@@ -0,0 +1,96 @@
+'use client'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  EllipsisIcon
+} from "./chunk-4TPVIHNO.js";
+import {
+  __export
+} from "./chunk-RTMS5TJN.js";
+
+// src/components/pagination/pagination.tsx
+var pagination_exports = {};
+__export(pagination_exports, {
+  Context: () => Context,
+  Ellipsis: () => Ellipsis,
+  Item: () => Item,
+  Items: () => Items,
+  NextButton: () => NextButton,
+  NextTrigger: () => NextTrigger,
+  PageText: () => PageText,
+  PrevButton: () => PrevButton,
+  PrevTrigger: () => PrevTrigger,
+  Root: () => Root
+});
+import { forwardRef, useMemo } from "react";
+import {
+  Button,
+  Pagination as ChakraPagination,
+  IconButton,
+  Text,
+  createContext,
+  usePaginationContext
+} from "@chakra-ui/react";
+import { jsx } from "react/jsx-runtime";
+var [RootPropsProvider, useRootProps] = createContext({
+  name: "RootPropsProvider"
+});
+var variantMap = {
+  outline: { default: "ghost", ellipsis: "plain", current: "outline" },
+  solid: { default: "outline", ellipsis: "outline", current: "solid" },
+  subtle: { default: "ghost", ellipsis: "plain", current: "subtle" }
+};
+var Root = forwardRef(
+  function PaginationRoot(props, ref) {
+    const { size = "sm", variant = "outline", ...rest } = props;
+    return /* @__PURE__ */ jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ jsx(ChakraPagination.Root, { ref, type: "button", ...rest }) });
+  }
+);
+var Ellipsis = forwardRef(function PaginationEllipsis(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ jsx(ChakraPagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(EllipsisIcon, {}) }) });
+});
+var Item = forwardRef(
+  function PaginationItem(props, ref) {
+    const { page } = usePaginationContext();
+    const { size, variantMap: variantMap2 } = useRootProps();
+    const current = page === props.value;
+    const variant = current ? variantMap2.current : variantMap2.default;
+    return /* @__PURE__ */ jsx(ChakraPagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, { variant, size, children: props.value }) });
+  }
+);
+var PrevButton = forwardRef(function PaginationPrevTrigger(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ jsx(ChakraPagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }) });
+});
+var NextButton = forwardRef(function PaginationNextTrigger(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ jsx(ChakraPagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) });
+});
+var Items = (props) => {
+  return /* @__PURE__ */ jsx(ChakraPagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return page.type === "ellipsis" ? /* @__PURE__ */ jsx(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ jsx(Item, { type: "page", value: page.value, ...props }, index);
+  }) });
+};
+var PageText = forwardRef(
+  function PaginationPageText(props, ref) {
+    const { format = "compact", ...rest } = props;
+    const { page, pages, pageRange, count } = usePaginationContext();
+    const content = useMemo(() => {
+      if (format === "short") return `${page} / ${pages.length}`;
+      if (format === "compact") return `${page} of ${pages.length}`;
+      return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
+    }, [format, page, pages.length, pageRange, count]);
+    return /* @__PURE__ */ jsx(Text, { fontWeight: "medium", ref, ...rest, children: content });
+  }
+);
+var PrevTrigger = ChakraPagination.PrevTrigger;
+var NextTrigger = ChakraPagination.NextTrigger;
+var Context = ChakraPagination.Context;
+
+export {
+  pagination_exports
+};

package/dist/{chunk-44ZA3TYW.js → chunk-VZG7EJ64.js}

@@ -1,7 +1,7 @@
 'use client'
 import {
   CheckIcon
-} from "./chunk-VDXTEASE.js";
+} from "./chunk-4TPVIHNO.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";

package/dist/{chunk-H6TFEHY4.js → chunk-WS5XGFSL.js}

@@ -1,7 +1,7 @@
 'use client'
 import {
   CloseButton
-} from "./chunk-FZW2DYK3.js";
+} from "./chunk-BKYGKH3L.js";
 import {
   __export
 } from "./chunk-RTMS5TJN.js";

package/dist/components/close-button/index.cjs

@@ -127,6 +127,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 
 // src/components/close-button/close-button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");

package/dist/components/close-button/index.js

@@ -1,8 +1,8 @@
 'use client'
 import {
   CloseButton
-} from "../../chunk-FZW2DYK3.js";
-import "../../chunk-VDXTEASE.js";
+} from "../../chunk-BKYGKH3L.js";
+import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   CloseButton

package/dist/components/dialog/index.cjs

@@ -148,6 +148,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 
 // src/components/close-button/close-button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");

package/dist/components/dialog/index.js

@@ -1,9 +1,9 @@
 'use client'
 import {
   namespace_exports
-} from "../../chunk-CB52LBJK.js";
-import "../../chunk-FZW2DYK3.js";
-import "../../chunk-VDXTEASE.js";
+} from "../../chunk-72LEGXHY.js";
+import "../../chunk-BKYGKH3L.js";
+import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   namespace_exports as Dialog

package/dist/components/drawer/index.cjs

@@ -149,6 +149,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 
 // src/components/close-button/close-button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");

package/dist/components/drawer/index.js

@@ -1,9 +1,9 @@
 'use client'
 import {
   namespace_exports
-} from "../../chunk-H6TFEHY4.js";
-import "../../chunk-FZW2DYK3.js";
-import "../../chunk-VDXTEASE.js";
+} from "../../chunk-WS5XGFSL.js";
+import "../../chunk-BKYGKH3L.js";
+import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   namespace_exports as Drawer

package/dist/components/grid-list/index.d.cts

@@ -2,13 +2,13 @@ import * as react from 'react';
 import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
 
-interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+interface GridListRootProps extends GridList.RootProps, HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList'> {
 }
-declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface GridListItemProps extends HTMLChakraProps<'div'> {
+declare const GridListRoot: react.ForwardRefExoticComponent<GridList.RootProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends GridList.ItemProps, HTMLChakraProps<'div'> {
 }
 declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
-interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+interface GridListHeaderProps extends GridList.HeaderProps, HTMLChakraProps<'header'> {
 }
 declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {

package/dist/components/grid-list/index.d.ts

@@ -2,13 +2,13 @@ import * as react from 'react';
 import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
 
-interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+interface GridListRootProps extends GridList.RootProps, HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList'> {
 }
-declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface GridListItemProps extends HTMLChakraProps<'div'> {
+declare const GridListRoot: react.ForwardRefExoticComponent<GridList.RootProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends GridList.ItemProps, HTMLChakraProps<'div'> {
 }
 declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
-interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+interface GridListHeaderProps extends GridList.HeaderProps, HTMLChakraProps<'header'> {
 }
 declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {

package/dist/components/icons/index.cjs

@@ -28,6 +28,7 @@ __export(icons_exports, {
   ChevronRightIcon: () => ChevronRightIcon,
   ChevronUpIcon: () => ChevronUpIcon,
   CloseIcon: () => CloseIcon,
+  EllipsisIcon: () => EllipsisIcon,
   FilterIcon: () => FilterIcon,
   HamburgerIcon: () => HamburgerIcon,
   MinusIcon: () => MinusIcon,
@@ -136,6 +137,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CalendarIcon,
@@ -145,6 +154,7 @@ var CheckIcon = createIcon({
   ChevronRightIcon,
   ChevronUpIcon,
   CloseIcon,
+  EllipsisIcon,
   FilterIcon,
   HamburgerIcon,
   MinusIcon,

package/dist/components/icons/index.d.cts

@@ -15,5 +15,6 @@ declare const ViewOffIcon: react.ForwardRefExoticComponent<_chakra_ui_react.Icon
 declare const ViewIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const SearchIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const CheckIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const EllipsisIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
 
-export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, FilterIcon, HamburgerIcon, MinusIcon, PlusIcon, SearchIcon, ViewIcon, ViewOffIcon };
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, EllipsisIcon, FilterIcon, HamburgerIcon, MinusIcon, PlusIcon, SearchIcon, ViewIcon, ViewOffIcon };

package/dist/components/icons/index.d.ts

@@ -15,5 +15,6 @@ declare const ViewOffIcon: react.ForwardRefExoticComponent<_chakra_ui_react.Icon
 declare const ViewIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const SearchIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const CheckIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const EllipsisIcon: react.ForwardRefExoticComponent<_chakra_ui_react.IconProps & react.RefAttributes<SVGSVGElement>>;
 
-export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, FilterIcon, HamburgerIcon, MinusIcon, PlusIcon, SearchIcon, ViewIcon, ViewOffIcon };
+export { CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, EllipsisIcon, FilterIcon, HamburgerIcon, MinusIcon, PlusIcon, SearchIcon, ViewIcon, ViewOffIcon };

package/dist/components/icons/index.js

@@ -8,6 +8,7 @@ import {
   ChevronRightIcon,
   ChevronUpIcon,
   CloseIcon,
+  EllipsisIcon,
   FilterIcon,
   HamburgerIcon,
   MinusIcon,
@@ -15,7 +16,7 @@ import {
   SearchIcon,
   ViewIcon,
   ViewOffIcon
-} from "../../chunk-VDXTEASE.js";
+} from "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   CalendarIcon,
@@ -25,6 +26,7 @@ export {
   ChevronRightIcon,
   ChevronUpIcon,
   CloseIcon,
+  EllipsisIcon,
   FilterIcon,
   HamburgerIcon,
   MinusIcon,

package/dist/components/menu/index.cjs

@@ -181,6 +181,14 @@ var CheckIcon = createIcon({
   displayName: "CheckIcon",
   path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
+var EllipsisIcon = createIcon({
+  displayName: "EllipsisIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
 
 // src/components/menu/menu.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");

package/dist/components/menu/index.js

@@ -1,10 +1,10 @@
 'use client'
 import {
   menu_exports
-} from "../../chunk-KK77TYNL.js";
+} from "../../chunk-C7B3ELC4.js";
 import "../../chunk-KTLWEUNW.js";
 import "../../chunk-BCNPBZZK.js";
-import "../../chunk-VDXTEASE.js";
+import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   menu_exports as Menu