@adamjanicki/ui 1.0.8 → 1.0.9

package/components/Spinner/Spinner.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * [Optional] Additional class names to apply to the spinner.
+     */
+    className?: string;
+    /**
+     * [Optional] Additional styles to apply to the spinner.
+     */
+    style?: React.CSSProperties;
+};
+declare const Spinner: ({ className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/components/Spinner/Spinner.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utils/util";
+var Spinner = function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (
+    // Designed on 2023-08-18
+    _jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", className: classNames("ajui-spinner", className) }, props, { children: _jsx("path", { fill: "currentColor", d: "M256,0C114.62,0,0,114.62,0,256S114.62,512,256,512c70.64,0,134.59-28.61,180.91-74.88l-31.11-31.11c-38.35,38.3-91.31,61.99-149.8,61.99-117.08,0-212-94.92-212-212S138.92,44,256,44V0Z" }) })));
+};
+export default Spinner;

package/components/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+import Spinner from "./Spinner";
+export default Spinner;

package/components/Spinner/index.js

@@ -0,0 +1,2 @@
+import Spinner from "./Spinner";
+export default Spinner;

package/index.d.ts

@@ -11,4 +11,5 @@ export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Modal } from "./components/Modal";
 export { default as Layer } from "./components/Layer";
+export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";

package/index.js

@@ -12,5 +12,6 @@ export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
 export { default as Modal } from "./components/Modal";
 export { default as Layer } from "./components/Layer";
+export { default as Spinner } from "./components/Spinner";
 // Hooks
 export * from "./hooks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/style.css

@@ -192,7 +192,6 @@ a {
 .ajui-button-base {
   background: none;
   color: inherit;
-  fill: inherit;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -220,7 +219,6 @@ a {
 .ajui-button--primary {
   background-color: var(--ajui-button-primary-background);
   color: var(--ajui-button-primary-color);
-  fill: var(--ajui-button-primary-color);
   transition: opacity var(--ajui-default-transition);
 }
 
@@ -329,3 +327,19 @@ a {
   font-size: 1.5rem;
   padding: 0 0.25rem;
 }
+
+/* Spinner */
+.ajui-spinner {
+  animation: ajui-spinner-animation 1s linear infinite;
+  transform-origin: center;
+  height: 1.5rem;
+}
+
+@keyframes ajui-spinner-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}