@adamjanicki/ui 1.0.7 → 1.0.9

package/components/Alert/Alert.d.ts

@@ -8,7 +8,7 @@ type Props = {
     /**
      * The content to display in the alert.
      */
-    children: string;
+    children: React.ReactNode | React.ReactNode[];
     /**
      * [Optional] Additional class names to apply to the alert.
      */

package/components/Badge/Badge.d.ts

@@ -9,7 +9,7 @@ type Props = {
      * The content to display in the badge.
      * Should be short.
      */
-    children: React.ReactNode;
+    children: React.ReactNode | React.ReactNode[];
     /**
      * [Optional] Additional class names to apply to the badge.
      */

package/components/Banner/Banner.d.ts

@@ -8,7 +8,7 @@ type Props = {
     /**
      * The content to display in the banner.
      */
-    children: React.ReactNode;
+    children: React.ReactNode | React.ReactNode[];
     /**
      * [Optional] Additional class names to apply to the banner.
      */

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.7",
+  "version": "1.0.9",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/style.css

@@ -53,7 +53,7 @@
   --ajui-static-color: #424242;
   --ajui-static-border: #bdbdbd;
   /* Modal */
-  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.5);
+  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.25);
   /* Link */
   --ajui-link-color: #0070ff;
 }
@@ -98,7 +98,7 @@
   --ajui-static-color: #e5e5e5;
   --ajui-static-border: #595959;
   /* Modal */
-  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.8);
+  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.4);
   /* Link */
   --ajui-link-color: #ffa500;
 }
@@ -192,7 +192,6 @@ a {
 .ajui-button-base {
   background: none;
   color: inherit;
-  fill: inherit;
   border: none;
   padding: 0;
   cursor: pointer;
@@ -239,14 +238,14 @@ a {
 }
 
 @media (hover: hover) {
-  .ajui-button--primary:not([disabled]):is(:hover, :focus-within),
-  .ajui-icon-button:not([disabled]):is(:hover, :focus-within),
-  .ajui-link-default:is(:hover, :focus-within) {
+  .ajui-button--primary:not([disabled]):is(:hover, :focus-visible),
+  .ajui-icon-button:not([disabled]):is(:hover, :focus-visible),
+  .ajui-link-default:is(:hover, :focus-visible) {
     opacity: var(--ajui-default-opacity-dim);
   }
 
-  .ajui-button--transparent:not([disabled]):is(:hover, :focus-within),
-  .ajui-button--secondary:not([disabled]):is(:hover, :focus-within) {
+  .ajui-button--transparent:not([disabled]):is(:hover, :focus-visible),
+  .ajui-button--secondary:not([disabled]):is(:hover, :focus-visible) {
     box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border-hover);
   }
 }
@@ -328,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);
+  }
+}