@sytechui/spinner 2.2.29

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @sytechui/loading
+
+Spinner express an unspecified wait time or display the length of a process.
+
+Please refer to the [documentation](https://heroui.com/docs/components/loading) for more information.
+
+## Installation
+
+```sh
+yarn add @sytechui/loading
+# or
+npm i @sytechui/loading
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/chunk-6KA2WGF7.mjs

@@ -0,0 +1,42 @@
+"use client";
+
+// src/use-spinner.ts
+import { mapPropsVariants } from "@sytechui/system-rsc";
+import { spinner, cn } from "@sytechui/theme";
+import { objectToDeps } from "@sytechui/shared-utils";
+import { useMemo, useCallback } from "react";
+import { useProviderContext } from "@sytechui/system";
+function useSpinner(originalProps) {
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, spinner.variantKeys);
+  const globalContext = useProviderContext();
+  const variant = (_b = (_a = originalProps == null ? void 0 : originalProps.variant) != null ? _a : globalContext == null ? void 0 : globalContext.spinnerVariant) != null ? _b : "default";
+  const { children, className, classNames, label: labelProp, ...otherProps } = props;
+  const slots = useMemo(
+    () => spinner({ ...variantProps, variant }),
+    [objectToDeps(variantProps), variant]
+  );
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
+  const label = labelProp || children;
+  const ariaLabel = useMemo(() => {
+    if (label && typeof label === "string") {
+      return label;
+    }
+    return !otherProps["aria-label"] ? "Loading" : "";
+  }, [children, label, otherProps["aria-label"]]);
+  const getSpinnerProps = useCallback(
+    () => ({
+      "aria-label": ariaLabel,
+      className: slots.base({
+        class: baseStyles
+      }),
+      ...otherProps
+    }),
+    [ariaLabel, slots, baseStyles, otherProps]
+  );
+  return { label, slots, classNames, variant, getSpinnerProps };
+}
+
+export {
+  useSpinner
+};

package/dist/chunk-W4MA5USS.mjs

@@ -0,0 +1,88 @@
+"use client";
+import {
+  useSpinner
+} from "./chunk-6KA2WGF7.mjs";
+
+// src/spinner.tsx
+import { forwardRef } from "@sytechui/system-rsc";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Spinner = forwardRef((props, ref) => {
+  const { slots, classNames, label, variant, getSpinnerProps } = useSpinner({ ...props });
+  if (variant === "wave" || variant === "dots") {
+    return /* @__PURE__ */ jsxs("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ jsx("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [...new Array(3)].map((_, index) => /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: slots.dots({ class: classNames == null ? void 0 : classNames.dots }),
+          style: {
+            "--dot-index": index
+          }
+        },
+        `dot-${index}`
+      )) }),
+      label && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  if (variant === "simple") {
+    return /* @__PURE__ */ jsxs("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: slots.circle1({ class: classNames == null ? void 0 : classNames.circle1 }),
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: slots.circle2({ class: classNames == null ? void 0 : classNames.circle2 }),
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                fill: "currentColor"
+              }
+            )
+          ]
+        }
+      ),
+      label && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  if (variant === "spinner") {
+    return /* @__PURE__ */ jsxs("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ jsx("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [...new Array(12)].map((_, index) => /* @__PURE__ */ jsx(
+        "i",
+        {
+          className: slots.spinnerBars({ class: classNames == null ? void 0 : classNames.spinnerBars }),
+          style: {
+            "--bar-index": index
+          }
+        },
+        `star-${index}`
+      )) }),
+      label && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, ...getSpinnerProps(), children: [
+    /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ jsx("i", { className: slots.circle1({ class: classNames == null ? void 0 : classNames.circle1 }) }),
+      /* @__PURE__ */ jsx("i", { className: slots.circle2({ class: classNames == null ? void 0 : classNames.circle2 }) })
+    ] }),
+    label && /* @__PURE__ */ jsx("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+  ] });
+});
+Spinner.displayName = "HeroUI.Spinner";
+var spinner_default = Spinner;
+
+export {
+  spinner_default
+};

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+export { default as Spinner, SpinnerProps } from './spinner.mjs';
+export { useSpinner } from './use-spinner.mjs';
+import '@sytechui/system-rsc';
+import '@sytechui/system/src/types';
+import 'tailwind-variants';
+import 'react';
+import '@sytechui/theme';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Spinner, SpinnerProps } from './spinner.js';
+export { useSpinner } from './use-spinner.js';
+import '@sytechui/system-rsc';
+import '@sytechui/system/src/types';
+import 'tailwind-variants';
+import 'react';
+import '@sytechui/theme';

package/dist/index.js

@@ -0,0 +1,149 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Spinner: () => spinner_default,
+  useSpinner: () => useSpinner
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/use-spinner.ts
+var import_system_rsc = require("@sytechui/system-rsc");
+var import_theme = require("@sytechui/theme");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react = require("react");
+var import_system = require("@sytechui/system");
+function useSpinner(originalProps) {
+  var _a, _b;
+  const [props, variantProps] = (0, import_system_rsc.mapPropsVariants)(originalProps, import_theme.spinner.variantKeys);
+  const globalContext = (0, import_system.useProviderContext)();
+  const variant = (_b = (_a = originalProps == null ? void 0 : originalProps.variant) != null ? _a : globalContext == null ? void 0 : globalContext.spinnerVariant) != null ? _b : "default";
+  const { children, className, classNames, label: labelProp, ...otherProps } = props;
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.spinner)({ ...variantProps, variant }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), variant]
+  );
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
+  const label = labelProp || children;
+  const ariaLabel = (0, import_react.useMemo)(() => {
+    if (label && typeof label === "string") {
+      return label;
+    }
+    return !otherProps["aria-label"] ? "Loading" : "";
+  }, [children, label, otherProps["aria-label"]]);
+  const getSpinnerProps = (0, import_react.useCallback)(
+    () => ({
+      "aria-label": ariaLabel,
+      className: slots.base({
+        class: baseStyles
+      }),
+      ...otherProps
+    }),
+    [ariaLabel, slots, baseStyles, otherProps]
+  );
+  return { label, slots, classNames, variant, getSpinnerProps };
+}
+
+// src/spinner.tsx
+var import_system_rsc2 = require("@sytechui/system-rsc");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = (0, import_system_rsc2.forwardRef)((props, ref) => {
+  const { slots, classNames, label, variant, getSpinnerProps } = useSpinner({ ...props });
+  if (variant === "wave" || variant === "dots") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [...new Array(3)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "i",
+        {
+          className: slots.dots({ class: classNames == null ? void 0 : classNames.dots }),
+          style: {
+            "--dot-index": index
+          }
+        },
+        `dot-${index}`
+      )) }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  if (variant === "simple") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                className: slots.circle1({ class: classNames == null ? void 0 : classNames.circle1 }),
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                className: slots.circle2({ class: classNames == null ? void 0 : classNames.circle2 }),
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                fill: "currentColor"
+              }
+            )
+          ]
+        }
+      ),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  if (variant === "spinner") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [...new Array(12)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "i",
+        {
+          className: slots.spinnerBars({ class: classNames == null ? void 0 : classNames.spinnerBars }),
+          style: {
+            "--bar-index": index
+          }
+        },
+        `star-${index}`
+      )) }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: slots.circle1({ class: classNames == null ? void 0 : classNames.circle1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: slots.circle2({ class: classNames == null ? void 0 : classNames.circle2 }) })
+    ] }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+  ] });
+});
+Spinner.displayName = "HeroUI.Spinner";
+var spinner_default = Spinner;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spinner,
+  useSpinner
+});

package/dist/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  spinner_default
+} from "./chunk-W4MA5USS.mjs";
+import {
+  useSpinner
+} from "./chunk-6KA2WGF7.mjs";
+export {
+  spinner_default as Spinner,
+  useSpinner
+};

package/dist/spinner.d.mts

@@ -0,0 +1,12 @@
+import * as _sytechui_system_rsc from '@sytechui/system-rsc';
+import { UseSpinnerProps } from './use-spinner.mjs';
+import '@sytechui/system/src/types';
+import 'tailwind-variants';
+import 'react';
+import '@sytechui/theme';
+
+interface SpinnerProps extends UseSpinnerProps {
+}
+declare const Spinner: _sytechui_system_rsc.InternalForwardRefRenderFunction<"div", SpinnerProps, never>;
+
+export { type SpinnerProps, Spinner as default };

package/dist/spinner.d.ts

@@ -0,0 +1,12 @@
+import * as _sytechui_system_rsc from '@sytechui/system-rsc';
+import { UseSpinnerProps } from './use-spinner.js';
+import '@sytechui/system/src/types';
+import 'tailwind-variants';
+import 'react';
+import '@sytechui/theme';
+
+interface SpinnerProps extends UseSpinnerProps {
+}
+declare const Spinner: _sytechui_system_rsc.InternalForwardRefRenderFunction<"div", SpinnerProps, never>;
+
+export { type SpinnerProps, Spinner as default };

package/dist/spinner.js

@@ -0,0 +1,143 @@
+"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/spinner.tsx
+var spinner_exports = {};
+__export(spinner_exports, {
+  default: () => spinner_default
+});
+module.exports = __toCommonJS(spinner_exports);
+var import_system_rsc2 = require("@sytechui/system-rsc");
+
+// src/use-spinner.ts
+var import_system_rsc = require("@sytechui/system-rsc");
+var import_theme = require("@sytechui/theme");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react = require("react");
+var import_system = require("@sytechui/system");
+function useSpinner(originalProps) {
+  var _a, _b;
+  const [props, variantProps] = (0, import_system_rsc.mapPropsVariants)(originalProps, import_theme.spinner.variantKeys);
+  const globalContext = (0, import_system.useProviderContext)();
+  const variant = (_b = (_a = originalProps == null ? void 0 : originalProps.variant) != null ? _a : globalContext == null ? void 0 : globalContext.spinnerVariant) != null ? _b : "default";
+  const { children, className, classNames, label: labelProp, ...otherProps } = props;
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.spinner)({ ...variantProps, variant }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), variant]
+  );
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
+  const label = labelProp || children;
+  const ariaLabel = (0, import_react.useMemo)(() => {
+    if (label && typeof label === "string") {
+      return label;
+    }
+    return !otherProps["aria-label"] ? "Loading" : "";
+  }, [children, label, otherProps["aria-label"]]);
+  const getSpinnerProps = (0, import_react.useCallback)(
+    () => ({
+      "aria-label": ariaLabel,
+      className: slots.base({
+        class: baseStyles
+      }),
+      ...otherProps
+    }),
+    [ariaLabel, slots, baseStyles, otherProps]
+  );
+  return { label, slots, classNames, variant, getSpinnerProps };
+}
+
+// src/spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = (0, import_system_rsc2.forwardRef)((props, ref) => {
+  const { slots, classNames, label, variant, getSpinnerProps } = useSpinner({ ...props });
+  if (variant === "wave" || variant === "dots") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [...new Array(3)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "i",
+        {
+          className: slots.dots({ class: classNames == null ? void 0 : classNames.dots }),
+          style: {
+            "--dot-index": index
+          }
+        },
+        `dot-${index}`
+      )) }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  if (variant === "simple") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                className: slots.circle1({ class: classNames == null ? void 0 : classNames.circle1 }),
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                className: slots.circle2({ class: classNames == null ? void 0 : classNames.circle2 }),
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                fill: "currentColor"
+              }
+            )
+          ]
+        }
+      ),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  if (variant === "spinner") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [...new Array(12)].map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "i",
+        {
+          className: slots.spinnerBars({ class: classNames == null ? void 0 : classNames.spinnerBars }),
+          style: {
+            "--bar-index": index
+          }
+        },
+        `star-${index}`
+      )) }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, ...getSpinnerProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: slots.circle1({ class: classNames == null ? void 0 : classNames.circle1 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: slots.circle2({ class: classNames == null ? void 0 : classNames.circle2 }) })
+    ] }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+  ] });
+});
+Spinner.displayName = "HeroUI.Spinner";
+var spinner_default = Spinner;

package/dist/spinner.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  spinner_default
+} from "./chunk-W4MA5USS.mjs";
+import "./chunk-6KA2WGF7.mjs";
+export {
+  spinner_default as default
+};

package/dist/use-spinner.d.mts

@@ -0,0 +1,130 @@
+import * as _sytechui_system_src_types from '@sytechui/system/src/types';
+import * as tailwind_variants from 'tailwind-variants';
+import * as react from 'react';
+import { Ref } from 'react';
+import { SlotsToClasses, SpinnerSlots, SpinnerVariantProps } from '@sytechui/theme';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system-rsc';
+
+interface Props extends HTMLHeroUIProps<"div"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: Ref<HTMLElement | null>;
+    /**
+     * Spinner label, in case you passed it will be used as `aria-label`.
+     */
+    label?: string;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Spinner classNames={{
+     *    base:"base-classes",
+     *    wrapper: "wrapper-classes",
+     *    circle1: "circle1-classes",
+     *    circle2: "circle2-classes",
+     *    label: "label-classes"
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<SpinnerSlots>;
+}
+type UseSpinnerProps = Props & SpinnerVariantProps;
+declare function useSpinner(originalProps: UseSpinnerProps): {
+    label: react.ReactNode;
+    slots: {
+        base: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        label: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle1: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle2: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        dots: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        spinnerBars: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        label: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle1: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle2: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        dots: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        spinnerBars: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"base" | "wrapper" | "label" | "circle1" | "circle2" | "dots" | "spinnerBars"> | undefined;
+    variant: _sytechui_system_src_types.SpinnerVariants;
+    getSpinnerProps: PropGetter;
+};
+type UseSpinnerReturn = ReturnType<typeof useSpinner>;
+
+export { type UseSpinnerProps, type UseSpinnerReturn, useSpinner };

package/dist/use-spinner.d.ts

@@ -0,0 +1,130 @@
+import * as _sytechui_system_src_types from '@sytechui/system/src/types';
+import * as tailwind_variants from 'tailwind-variants';
+import * as react from 'react';
+import { Ref } from 'react';
+import { SlotsToClasses, SpinnerSlots, SpinnerVariantProps } from '@sytechui/theme';
+import { HTMLHeroUIProps, PropGetter } from '@sytechui/system-rsc';
+
+interface Props extends HTMLHeroUIProps<"div"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: Ref<HTMLElement | null>;
+    /**
+     * Spinner label, in case you passed it will be used as `aria-label`.
+     */
+    label?: string;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Spinner classNames={{
+     *    base:"base-classes",
+     *    wrapper: "wrapper-classes",
+     *    circle1: "circle1-classes",
+     *    circle2: "circle2-classes",
+     *    label: "label-classes"
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<SpinnerSlots>;
+}
+type UseSpinnerProps = Props & SpinnerVariantProps;
+declare function useSpinner(originalProps: UseSpinnerProps): {
+    label: react.ReactNode;
+    slots: {
+        base: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        label: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle1: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle2: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        dots: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        spinnerBars: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        label: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle1: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        circle2: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        dots: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        spinnerBars: (slotProps?: ({
+            size?: "md" | "sm" | "lg" | undefined;
+            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "current" | "white" | undefined;
+            variant?: "default" | "dots" | "gradient" | "wave" | "simple" | "spinner" | undefined;
+            labelColor?: "primary" | "secondary" | "success" | "warning" | "danger" | "foreground" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"base" | "wrapper" | "label" | "circle1" | "circle2" | "dots" | "spinnerBars"> | undefined;
+    variant: _sytechui_system_src_types.SpinnerVariants;
+    getSpinnerProps: PropGetter;
+};
+type UseSpinnerReturn = ReturnType<typeof useSpinner>;
+
+export { type UseSpinnerProps, type UseSpinnerReturn, useSpinner };

package/dist/use-spinner.js

@@ -0,0 +1,65 @@
+"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/use-spinner.ts
+var use_spinner_exports = {};
+__export(use_spinner_exports, {
+  useSpinner: () => useSpinner
+});
+module.exports = __toCommonJS(use_spinner_exports);
+var import_system_rsc = require("@sytechui/system-rsc");
+var import_theme = require("@sytechui/theme");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_react = require("react");
+var import_system = require("@sytechui/system");
+function useSpinner(originalProps) {
+  var _a, _b;
+  const [props, variantProps] = (0, import_system_rsc.mapPropsVariants)(originalProps, import_theme.spinner.variantKeys);
+  const globalContext = (0, import_system.useProviderContext)();
+  const variant = (_b = (_a = originalProps == null ? void 0 : originalProps.variant) != null ? _a : globalContext == null ? void 0 : globalContext.spinnerVariant) != null ? _b : "default";
+  const { children, className, classNames, label: labelProp, ...otherProps } = props;
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.spinner)({ ...variantProps, variant }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), variant]
+  );
+  const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
+  const label = labelProp || children;
+  const ariaLabel = (0, import_react.useMemo)(() => {
+    if (label && typeof label === "string") {
+      return label;
+    }
+    return !otherProps["aria-label"] ? "Loading" : "";
+  }, [children, label, otherProps["aria-label"]]);
+  const getSpinnerProps = (0, import_react.useCallback)(
+    () => ({
+      "aria-label": ariaLabel,
+      className: slots.base({
+        class: baseStyles
+      }),
+      ...otherProps
+    }),
+    [ariaLabel, slots, baseStyles, otherProps]
+  );
+  return { label, slots, classNames, variant, getSpinnerProps };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSpinner
+});

package/dist/use-spinner.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useSpinner
+} from "./chunk-6KA2WGF7.mjs";
+export {
+  useSpinner
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@sytechui/spinner",
+  "version": "2.2.29",
+  "description": "Loaders express an unspecified wait time or display the length of a process.",
+  "keywords": [
+    "loading",
+    "spinner",
+    "progress"
+  ],
+  "author": "HeroUI <support@heroui.com>",
+  "homepage": "https://heroui.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heroui-inc/heroui.git",
+    "directory": "packages/components/loading"
+  },
+  "bugs": {
+    "url": "https://github.com/heroui-inc/heroui/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@sytechui/theme": ">=2.4.24"
+  },
+  "dependencies": {
+    "@sytechui/system-rsc": "2.3.24",
+    "@sytechui/system": "2.4.28",
+    "@sytechui/shared-utils": "2.1.12"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src"
+  }
+}