@adamjanicki/ui 1.0.8 → 1.1.0

package/components/Badge/Badge.d.ts

@@ -20,7 +20,7 @@ type Props = {
     style?: React.CSSProperties;
     /**
      * [Optional] The corner style of the badge.
-     * @default "pill"
+     * @default "rounded"
      */
     corners?: CornerType;
 };

package/components/Layer/Layer.d.ts

@@ -1,9 +1,5 @@
 import React from "react";
 type Props = {
-    /**
-     * Whether the layer is open or not
-     */
-    open: boolean;
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -21,6 +17,11 @@ type Props = {
      * [Optional] Additional styles
      */
     backdropStyle?: React.CSSProperties;
+    /**
+     * [Optional] Whether to disable the escape key to close the layer
+     * @default false
+     */
+    disableEscape?: boolean;
 };
-declare const Modal: ({ open, onClose, children, backdropStyle, backdropClassName, }: Props) => JSX.Element | null;
-export default Modal;
+declare const Layer: ({ onClose, children, backdropStyle, backdropClassName, disableEscape, }: Props) => JSX.Element | null;
+export default Layer;

package/components/Layer/Layer.js

@@ -2,34 +2,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import { classNames } from "../../utils/util";
-var Modal = function (_a) {
-    var open = _a.open, onClose = _a.onClose, children = _a.children, _b = _a.backdropStyle, backdropStyle = _b === void 0 ? {} : _b, backdropClassName = _a.backdropClassName;
-    var _c = useScrollLock(), lock = _c.lock, unlock = _c.unlock;
-    var focusRef = useFocusTrap(open);
+var Layer = function (_a) {
+    var onClose = _a.onClose, children = _a.children, _b = _a.backdropStyle, backdropStyle = _b === void 0 ? {} : _b, backdropClassName = _a.backdropClassName, _c = _a.disableEscape, disableEscape = _c === void 0 ? false : _c;
+    var _d = useScrollLock(), lock = _d.lock, unlock = _d.unlock;
+    var focusRef = useFocusTrap(true);
     useEffect(function () {
         var handleEscape = function (event) {
             if (event.key === "Escape") {
                 onClose();
             }
         };
-        document.addEventListener("keydown", handleEscape);
+        if (!disableEscape)
+            document.addEventListener("keydown", handleEscape);
         return function () {
-            document.removeEventListener("keydown", handleEscape);
+            if (!disableEscape)
+                document.removeEventListener("keydown", handleEscape);
         };
-    }, [onClose]);
+    }, [onClose, disableEscape]);
     useEffect(function () {
-        if (open)
-            lock();
-        else
-            unlock();
-    }, [open, lock, unlock]);
-    return open ? (_jsx("div", { className: classNames("ajui-layer-backdrop", backdropClassName), style: backdropStyle, onClick: onClose, children: React.cloneElement(children, {
+        lock();
+        return unlock;
+    }, [lock, unlock]);
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", backdropClassName), style: backdropStyle, onClick: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onClick: function (e) {
                 var _a, _b;
                 e.stopPropagation();
                 (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
-        }) })) : null;
+        }) }));
 };
-export default Modal;
+export default Layer;

package/components/Modal/Modal.js

@@ -4,9 +4,9 @@ import { classNames } from "../../utils/util";
 import Layer from "../Layer";
 var Modal = function (_a) {
     var open = _a.open, onClose = _a.onClose, children = _a.children, className = _a.className, style = _a.style;
-    return (_jsx(Layer, { onClose: onClose, open: open, children: _jsxs("div", { className: classNames("ajui-modal", className), role: "dialog", "aria-modal": "true", style: style, children: [_jsx("div", { style: {
+    return open ? (_jsx(Layer, { onClose: onClose, children: _jsxs("div", { className: classNames("ajui-modal", className), role: "dialog", "aria-modal": "true", style: style, children: [_jsx("div", { style: {
                         display: "flex",
                         justifyContent: "flex-end",
-                    }, children: _jsx(IconButton, { name: "close", icon: "\u00D7", onClick: onClose, className: "ajui-modal-close" }) }), children] }) }));
+                    }, children: _jsx(IconButton, { name: "close", icon: "\u00D7", onClick: onClose, className: "ajui-modal-close" }) }), children] }) })) : null;
 };
 export default Modal;

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/hooks/useFocusTrap.d.ts

@@ -1,7 +1,7 @@
 /**
  * A hook for trapping focus within an element.
  *
- * @param isActive true if an element is active, false otherwise
+ * @param isActive true if the element is active, false otherwise
  * @returns ref object that must be passed to the element that should be trapped
  */
 declare const useFocusTrap: <T extends HTMLElement>(isActive: boolean) => import("react").MutableRefObject<T | null>;

package/hooks/useFocusTrap.js

@@ -3,7 +3,7 @@ var focusableElementsString = 'a[href], area[href], input:not([disabled]), selec
 /**
  * A hook for trapping focus within an element.
  *
- * @param isActive true if an element is active, false otherwise
+ * @param isActive true if the element is active, false otherwise
  * @returns ref object that must be passed to the element that should be trapped
  */
 var useFocusTrap = function (isActive) {

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

package/style.css

@@ -49,9 +49,9 @@
   --ajui-info-color: #0d47a1;
   --ajui-info-border: #90caf9;
 
-  --ajui-static-background: #f5f5f5;
-  --ajui-static-color: #424242;
-  --ajui-static-border: #bdbdbd;
+  --ajui-static-background: #e8e8e8;
+  --ajui-static-color: var(--ajui-default-color);
+  --ajui-static-border: var(--ajui-default-border);
   /* Modal */
   --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.25);
   /* Link */
@@ -94,9 +94,9 @@
   --ajui-info-color: #d4f1f5;
   --ajui-info-border: #1d8ea4;
 
-  --ajui-static-background: #333333;
-  --ajui-static-color: #e5e5e5;
-  --ajui-static-border: #595959;
+  --ajui-static-background: var(--ajui-darkest-gray);
+  --ajui-static-color: var(--ajui-default-color);
+  --ajui-static-border: var(--ajui-default-border);
   /* Modal */
   --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.4);
   /* Link */
@@ -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);
+  }
+}