@saas-ui/react 3.0.0-alpha.9 → 3.0.0-next.1

package/dist/components/native-select/index.cjs

@@ -0,0 +1,178 @@
+'use client'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/native-select/index.ts
+var native_select_exports = {};
+__export(native_select_exports, {
+  NativeSelect: () => NativeSelect
+});
+module.exports = __toCommonJS(native_select_exports);
+
+// src/components/native-select/native-select.tsx
+var React = __toESM(require("react"), 1);
+var import_native_select = require("@chakra-ui/react/native-select");
+
+// src/components/icons/create-icon.tsx
+var import_icon = require("@chakra-ui/react/icon");
+var createIcon = (props) => {
+  return (0, import_icon.createIcon)({
+    viewBox: "0 0 24 24",
+    defaultProps: {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    ...props
+  });
+};
+
+// src/components/icons/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChevronUpIcon = createIcon({
+  displayName: "ChevronUpIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+});
+var ChevronDownIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
+});
+var ChevronLeftIcon = createIcon({
+  displayName: "ChevronLeftIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 18 9 12 15 6" })
+});
+var ChevronRightIcon = createIcon({
+  displayName: "ChevronRightIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 18 15 12 9 6" })
+});
+var HamburgerIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+  ] })
+});
+var CloseIcon = createIcon({
+  displayName: "CloseIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] })
+});
+var FilterIcon = createIcon({
+  displayName: "FilterIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+  ] })
+});
+var PlusIcon = createIcon({
+  displayName: "PlusIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] })
+});
+var MinusIcon = createIcon({
+  displayName: "MinusIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+});
+var ViewOffIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] })
+});
+var ViewIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+});
+var SearchIcon = createIcon({
+  displayName: "SearchIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] })
+});
+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" })
+  ] })
+});
+var CopyIcon = createIcon({
+  displayName: "CopyIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] })
+});
+var InfoIcon = createIcon({
+  displayName: "InfoIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 8h.01" })
+  ] })
+});
+
+// src/components/native-select/native-select.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NativeSelect = React.forwardRef(
+  function NativeSelect2(props, ref) {
+    const { icon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDownIcon, {}), placeholder, children, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_native_select.NativeSelect.Root, { ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_native_select.NativeSelect.Field, { placeholder, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_native_select.NativeSelect.Indicator, { children: icon })
+    ] }) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NativeSelect
+});

package/dist/components/native-select/index.d.cts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { NativeSelect as NativeSelect$1 } from '@chakra-ui/react/native-select';
+
+interface NativeSelectProps extends NativeSelect$1.RootProps {
+    icon?: react.ReactNode;
+    placeholder?: string;
+}
+declare const NativeSelect: react.ForwardRefExoticComponent<NativeSelectProps & react.RefAttributes<HTMLDivElement>>;
+
+export { NativeSelect, type NativeSelectProps };

package/dist/components/native-select/index.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { NativeSelect as NativeSelect$1 } from '@chakra-ui/react/native-select';
+
+interface NativeSelectProps extends NativeSelect$1.RootProps {
+    icon?: react.ReactNode;
+    placeholder?: string;
+}
+declare const NativeSelect: react.ForwardRefExoticComponent<NativeSelectProps & react.RefAttributes<HTMLDivElement>>;
+
+export { NativeSelect, type NativeSelectProps };

package/dist/components/native-select/index.js

@@ -0,0 +1,10 @@
+'use client'
+import {
+  NativeSelect
+} from "../../chunk-HD7BIWDH.js";
+import "../../chunk-KTLWEUNW.js";
+import "../../chunk-4XB7B73X.js";
+import "../../chunk-RTMS5TJN.js";
+export {
+  NativeSelect
+};

package/dist/components/number-input/index.cjs

@@ -26,12 +26,17 @@ __export(number_input_exports, {
 module.exports = __toCommonJS(number_input_exports);
 
 // src/components/number-input/number-input.tsx
-var import_react3 = require("react");
-var import_react4 = require("@chakra-ui/react");
+var import_react2 = require("react");
+var import_number_input = require("@chakra-ui/react/number-input");
 
 // src/components/input-group/input-group.tsx
 var import_react = require("react");
-var import_react2 = require("@chakra-ui/react");
+var import_group = require("@chakra-ui/react/group");
+
+// src/components/input/index.ts
+var import_input = require("@chakra-ui/react/input");
+
+// src/components/input-group/input-group.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var InputGroup = (0, import_react.forwardRef)(
   function InputGroup2(props, ref) {
@@ -43,21 +48,21 @@ var InputGroup = (0, import_react.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Group, { ref, display: "flex", ...rest, children: [
-      startElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_group.Group, { ref, display: "flex", ...rest, children: [
+      startElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
       (0, import_react.isValidElement)(children) && (0, import_react.cloneElement)(children, {
         ...startElement && { ps: "calc(var(--input-height) - 6px)" },
         ...endElement && { pe: "calc(var(--input-height) - 6px)" },
         ...children.props
       }),
-      endElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.InputElement, { placement: "end", ...endElementProps, children: endElement })
+      endElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input.InputElement, { placement: "end", ...endElementProps, children: endElement })
     ] });
   }
 );
 
 // src/components/number-input/number-input.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var NumberInput = (0, import_react3.forwardRef)(
+var NumberInput = (0, import_react2.forwardRef)(
   function NumberInput2(props, ref) {
     const {
       hideControls,
@@ -67,11 +72,19 @@ var NumberInput = (0, import_react3.forwardRef)(
       rootRef,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.NumberInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.Input, { ref, ...inputProps }) }),
-      !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react4.NumberInput.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.IncrementTrigger, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.NumberInput.DecrementTrigger, {})
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_number_input.NumberInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        InputGroup,
+        {
+          startElement,
+          endElement,
+          width: "full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_number_input.NumberInput.Input, { ref, ...inputProps })
+        }
+      ),
+      !hideControls && !endElement ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_number_input.NumberInput.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_number_input.NumberInput.IncrementTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_number_input.NumberInput.DecrementTrigger, {})
       ] }) : null
     ] });
   }

package/dist/components/number-input/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { NumberInput as NumberInput$1 } from '@chakra-ui/react';
+import { NumberInput as NumberInput$1 } from '@chakra-ui/react/number-input';
 
 interface NumberInputProps extends Omit<NumberInput$1.RootProps, 'children'> {
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/components/number-input/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { NumberInput as NumberInput$1 } from '@chakra-ui/react';
+import { NumberInput as NumberInput$1 } from '@chakra-ui/react/number-input';
 
 interface NumberInputProps extends Omit<NumberInput$1.RootProps, 'children'> {
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/components/number-input/index.js

@@ -1,8 +1,9 @@
 'use client'
 import {
   NumberInput
-} from "../../chunk-ULAJ3JEO.js";
-import "../../chunk-PKI6YH2V.js";
+} from "../../chunk-IEWGZ4LU.js";
+import "../../chunk-HKMYYESV.js";
+import "../../chunk-5MTFSSOH.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   NumberInput

package/dist/components/pagination/index.cjs

@@ -0,0 +1,253 @@
+'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/pagination/index.ts
+var pagination_exports2 = {};
+__export(pagination_exports2, {
+  Pagination: () => pagination_exports
+});
+module.exports = __toCommonJS(pagination_exports2);
+
+// 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
+});
+var import_react2 = require("react");
+var import_pagination = require("@chakra-ui/react/pagination");
+var import_typography = require("@chakra-ui/react/typography");
+var import_utils = require("@saas-ui/core/utils");
+
+// src/components/button/index.ts
+var import_button = require("@chakra-ui/react/button");
+
+// src/components/icon-button/icon-button.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.Button,
+      {
+        px: "0",
+        py: "0",
+        _icon: { fontSize: "1.2em" },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/icons/create-icon.tsx
+var import_icon = require("@chakra-ui/react/icon");
+var createIcon = (props) => {
+  return (0, import_icon.createIcon)({
+    viewBox: "0 0 24 24",
+    defaultProps: {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    ...props
+  });
+};
+
+// src/components/icons/icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChevronUpIcon = createIcon({
+  displayName: "ChevronUpIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "18 15 12 9 6 15" })
+});
+var ChevronDownIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "6 9 12 15 18 9" })
+});
+var ChevronLeftIcon = createIcon({
+  displayName: "ChevronLeftIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "15 18 9 12 15 6" })
+});
+var ChevronRightIcon = createIcon({
+  displayName: "ChevronRightIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "9 18 15 12 9 6" })
+});
+var HamburgerIcon = createIcon({
+  displayName: "ChevronDownIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+  ] })
+});
+var CloseIcon = createIcon({
+  displayName: "CloseIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] })
+});
+var FilterIcon = createIcon({
+  displayName: "FilterIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+  ] })
+});
+var PlusIcon = createIcon({
+  displayName: "PlusIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] })
+});
+var MinusIcon = createIcon({
+  displayName: "MinusIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+});
+var ViewOffIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] })
+});
+var ViewIcon = createIcon({
+  displayName: "ViewOffIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+});
+var SearchIcon = createIcon({
+  displayName: "SearchIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] })
+});
+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" })
+  ] })
+});
+var CopyIcon = createIcon({
+  displayName: "CopyIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] })
+});
+var InfoIcon = createIcon({
+  displayName: "InfoIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 8h.01" })
+  ] })
+});
+
+// src/components/pagination/pagination.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var [RootPropsProvider, useRootProps] = (0, import_utils.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 = (0, import_react2.forwardRef)(
+  function PaginationRoot(props, ref) {
+    const { size = "sm", variant = "outline", ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Root, { ref, type: "button", ...rest }) });
+  }
+);
+var Ellipsis = (0, import_react2.forwardRef)(function PaginationEllipsis(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EllipsisIcon, {}) }) });
+});
+var Item = (0, import_react2.forwardRef)(
+  function PaginationItem(props, ref) {
+    const { page } = (0, import_pagination.usePaginationContext)();
+    const { size, variantMap: variantMap2 } = useRootProps();
+    const current = page === props.value;
+    const variant = current ? variantMap2.current : variantMap2.default;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button.Button, { variant, size, children: props.value }) });
+  }
+);
+var PrevButton = (0, import_react2.forwardRef)(function PaginationPrevTrigger(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronLeftIcon, {}) }) });
+});
+var NextButton = (0, import_react2.forwardRef)(function PaginationNextTrigger(props, ref) {
+  var _a;
+  const { size, variantMap: variantMap2 } = useRootProps();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, {}) }) });
+});
+var Items = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Item, { type: "page", value: page.value, ...props }, index);
+  }) });
+};
+var PageText = (0, import_react2.forwardRef)(
+  function PaginationPageText(props, ref) {
+    const { format = "compact", ...rest } = props;
+    const { page, pages, pageRange, count } = (0, import_pagination.usePaginationContext)();
+    const content = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsx)(import_typography.Text, { fontWeight: "medium", ref, ...rest, children: content });
+  }
+);
+var PrevTrigger = import_pagination.Pagination.PrevTrigger;
+var NextTrigger = import_pagination.Pagination.NextTrigger;
+var Context = import_pagination.Pagination.Context;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pagination
+});

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

@@ -0,0 +1,43 @@
+import * as _ark_ui_react from '@ark-ui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { Pagination } from '@chakra-ui/react/pagination';
+import { TextProps } from '@chakra-ui/react/typography';
+import { ButtonProps } from '@chakra-ui/react/button';
+
+type PaginationVariant = 'outline' | 'solid' | 'subtle';
+interface RootProps extends Omit<Pagination.RootProps, 'type'> {
+    size?: ButtonProps['size'];
+    variant?: PaginationVariant;
+}
+declare const Root: react.ForwardRefExoticComponent<RootProps & react.RefAttributes<HTMLDivElement>>;
+declare const Ellipsis: react.ForwardRefExoticComponent<Pagination.EllipsisProps & react.RefAttributes<HTMLDivElement>>;
+declare const Item: react.ForwardRefExoticComponent<Pagination.ItemProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PrevButton: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const NextButton: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Items: (props: React.HTMLAttributes<HTMLElement>) => react_jsx_runtime.JSX.Element;
+interface PageTextProps extends TextProps {
+    format?: 'short' | 'compact' | 'long';
+}
+declare const PageText: react.ForwardRefExoticComponent<PageTextProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const PrevTrigger: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const NextTrigger: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Context: (props: _ark_ui_react.PaginationContextProps) => react.ReactNode;
+
+declare const pagination_Context: typeof Context;
+declare const pagination_Ellipsis: typeof Ellipsis;
+declare const pagination_Item: typeof Item;
+declare const pagination_Items: typeof Items;
+declare const pagination_NextButton: typeof NextButton;
+declare const pagination_NextTrigger: typeof NextTrigger;
+declare const pagination_PageText: typeof PageText;
+type pagination_PageTextProps = PageTextProps;
+declare const pagination_PrevButton: typeof PrevButton;
+declare const pagination_PrevTrigger: typeof PrevTrigger;
+declare const pagination_Root: typeof Root;
+type pagination_RootProps = RootProps;
+declare namespace pagination {
+  export { pagination_Context as Context, pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, type pagination_PageTextProps as PageTextProps, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
+}
+
+export { pagination as Pagination };