@adamjanicki/ui 1.0.6 → 1.0.8

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

@@ -0,0 +1,26 @@
+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
+     */
+    onClose: () => void;
+    /**
+     * The child of the layer.
+     * IMPORTANT: the child must be able to accept a ref
+     */
+    children: React.ReactElement;
+    /**
+     * [Optional] Additional class name
+     */
+    backdropClassName?: string;
+    /**
+     * [Optional] Additional styles
+     */
+    backdropStyle?: React.CSSProperties;
+};
+declare const Modal: ({ open, onClose, children, backdropStyle, backdropClassName, }: Props) => JSX.Element | null;
+export default Modal;

package/components/Layer/Layer.js

@@ -0,0 +1,35 @@
+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);
+    useEffect(function () {
+        var handleEscape = function (event) {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return function () {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [onClose]);
+    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, {
+            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;

package/components/Layer/index.d.ts

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

package/components/Layer/index.js

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

package/components/Modal/Modal.d.ts

@@ -3,7 +3,7 @@ type Props = {
     /**
      * Whether the modal is open or not
      */
-    isOpen: boolean;
+    open: boolean;
     /**
      * Callback that fires when the user clicks the close button or outside the modal
      */
@@ -21,5 +21,5 @@ type Props = {
      */
     style?: React.CSSProperties;
 };
-declare const Modal: ({ isOpen, onClose, children, className, style, }: Props) => JSX.Element | null;
+declare const Modal: ({ open, onClose, children, className, style, }: Props) => JSX.Element | null;
 export default Modal;

package/components/Modal/Modal.js

@@ -1,36 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useFocusTrap, useScrollLock } from "../../hooks";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton } from "../Button";
 import { classNames } from "../../utils/util";
+import Layer from "../Layer";
 var Modal = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, className = _a.className, style = _a.style;
-    var _b = useScrollLock(), lock = _b.lock, unlock = _b.unlock;
-    var focusRef = useFocusTrap(isOpen);
-    useEffect(function () {
-        var handleEscape = function (event) {
-            if (event.key === "Escape") {
-                onClose();
-            }
-        };
-        document.addEventListener("keydown", handleEscape);
-        return function () {
-            document.removeEventListener("keydown", handleEscape);
-        };
-    }, [onClose]);
-    useEffect(function () {
-        if (isOpen) {
-            lock();
-        }
-        else {
-            unlock();
-        }
-    }, [isOpen, lock, unlock]);
-    if (!isOpen)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ajui-modal-backdrop", onClick: onClose }), _jsxs("div", { className: classNames("ajui-modal", className), role: "dialog", "aria-modal": "true", ref: focusRef, 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, " "] })] }));
+    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: {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                    }, children: _jsx(IconButton, { name: "close", icon: "\u00D7", onClick: onClose, className: "ajui-modal-close" }) }), children] }) }));
 };
 export default Modal;

package/components/Select/Select.d.ts

@@ -11,14 +11,14 @@ type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElemen
      * @param option the option to get the value of
      * @returns the value of the option
      */
-    getOptionValue: (option: string) => string;
+    getOptionValue?: (option: string) => string;
     /**
      * Mapper function to get the label of the option
      *
      * @param option the option to get the label of
      * @returns the label of the option
      */
-    getOptionLabel: (option: string) => string;
+    getOptionLabel?: (option: string) => string;
     /**
      * [Optional] The corner style of the select element.
      * @default "rounded"

package/components/Select/Select.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "../../utils/util";
+var identity = function (x) { return x; };
 var Select = function (_a, ref) {
-    var className = _a.className, options = _a.options, getOptionValue = _a.getOptionValue, getOptionLabel = _a.getOptionLabel, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners"]);
+    var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners"]);
     return (_jsx("select", __assign({}, props, { ref: ref, className: classNames("ajui-select-base corners--".concat(corners), className), children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })));
 };
 export default forwardRef(Select);

package/index.d.ts

@@ -10,4 +10,5 @@ export { default as Banner } from "./components/Banner";
 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 * from "./hooks";

package/index.js

@@ -11,5 +11,6 @@ export { default as Banner } from "./components/Banner";
 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";
 // Hooks
 export * from "./hooks";

package/package.json

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

package/style.css

@@ -3,14 +3,16 @@
   /* General colors */
   --ajui-light-gray: #eee;
   --ajui-moon-gray: #ccc;
+  --ajui-dark-gray: #555;
   --ajui-darkest-gray: #333;
+  --ajui-obsidian: #121212;
   --ajui-focus-ring-color: #b2dbfa;
-  --ajui-default-color: black;
+  --ajui-default-color: #111;
   --ajui-default-background: white;
   --ajui-default-border: var(--ajui-moon-gray);
   /* General values */
-  --ajui-disabled-opacity: 0.4;
-  --ajui-default-transition: 0.2s ease-in-out;
+  --ajui-disabled-opacity: 0.5;
+  --ajui-default-transition: 0.25s ease-in-out;
   --ajui-default-opacity-dim: 0.75;
   /* Corners */
   --ajui-sharp-radius: 0;
@@ -18,18 +20,18 @@
   --ajui-pill-radius: 9999px;
   --ajui-circle-radius: 50%;
   /* Buttons */
-  --ajui-button-primary-background: var(--ajui-default-color);
-  --ajui-button-primary-color: var(--ajui-default-background);
-  --ajui-button-secondary-background: var(--ajui-default-background);
-  --ajui-button-secondary-color: var(--ajui-default-color);
-  --ajui-button-secondary-border: var(--ajui-default-border);
+  --ajui-button-primary-background: black;
+  --ajui-button-primary-color: white;
+  --ajui-button-secondary-background: white;
+  --ajui-button-secondary-color: #111;
+  --ajui-button-secondary-border: var(--ajui-moon-gray);
   --ajui-button-transparent-background: transparent;
   --ajui-button-secondary-border-hover: var(--ajui-darkest-gray);
   /* Input */
   --ajui-input-selection-color: var(--ajui-focus-ring-color);
   --ajui-input-border: var(--ajui-default-border);
   /* Select */
-  --ajui-select-border: var(--ajui-default-border);
+  --ajui-select-border: var(--ajui-moon-gray);
   /* Content types */
   --ajui-success-background: #dff2e1;
   --ajui-success-color: #1b5e20;
@@ -51,13 +53,61 @@
   --ajui-static-color: #424242;
   --ajui-static-border: #bdbdbd;
   /* Modal */
-  --ajui-modal-backdrop-background: rgba(0, 0, 0, 0.5);
+  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.25);
   /* Link */
   --ajui-link-color: #0070ff;
 }
 
+[data-theme="dark"] {
+  /* General colors */
+  --ajui-focus-ring-color: #6699cc;
+  --ajui-default-color: white;
+  --ajui-default-background: var(--ajui-obsidian);
+  --ajui-default-border: var(--ajui-dark-gray);
+  /* Buttons */
+  --ajui-button-primary-background: white;
+  --ajui-button-primary-color: var(--ajui-obsidian);
+  --ajui-button-secondary-background: var(--ajui-obsidian);
+  --ajui-button-secondary-color: white;
+  --ajui-button-secondary-border: var(--ajui-dark-gray);
+  --ajui-button-transparent-background: transparent;
+  --ajui-button-secondary-border-hover: var(--ajui-moon-gray);
+  /* Input */
+  --ajui-input-selection-color: var(--ajui-focus-ring-color);
+  --ajui-input-border: var(--ajui-dark-gray);
+  /* Select */
+  --ajui-select-border: var(--ajui-dark-gray);
+  /* Content types */
+  --ajui-success-background: #2a5733;
+  --ajui-success-color: #d9efd8;
+  --ajui-success-border: #439e4a;
+
+  --ajui-warning-background: #736230;
+  --ajui-warning-color: #fff6d1;
+  --ajui-warning-border: #927a3b;
+
+  --ajui-error-background: #663232;
+  --ajui-error-color: #f9dadc;
+  --ajui-error-border: #8d2a2a;
+
+  --ajui-info-background: #335f72;
+  --ajui-info-color: #d4f1f5;
+  --ajui-info-border: #1d8ea4;
+
+  --ajui-static-background: #333333;
+  --ajui-static-color: #e5e5e5;
+  --ajui-static-border: #595959;
+  /* Modal */
+  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.4);
+  /* Link */
+  --ajui-link-color: #ffa500;
+}
+
 a:not([disabled]):is(:focus-visible),
-button:not([disabled]):is(:focus-visible),
+button:not([disabled]):is(:focus-visible) {
+  outline: 3px solid var(--ajui-link-color);
+  outline-offset: 0;
+}
 .ajui-input-default:focus-within,
 .ajui-select-base:focus-within {
   outline: 3px solid var(--ajui-focus-ring-color);
@@ -108,7 +158,7 @@ button:not([disabled]):is(:focus-visible),
 
 /* Alert */
 .ajui-alert {
-  padding: 0.75rem;
+  padding: 1rem;
   border-style: solid;
   border-width: 1px;
   font-weight: 400;
@@ -116,7 +166,7 @@ button:not([disabled]):is(:focus-visible),
 
 /* Badge */
 .ajui-badge {
-  padding: 1px 5px;
+  padding: 0.125rem 0.375rem;
   border-style: solid;
   border-width: 1px;
   font-weight: 600;
@@ -151,7 +201,7 @@ a {
 }
 
 .ajui-button-default {
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem 1rem;
 }
 
 .ajui-icon-button {
@@ -170,6 +220,7 @@ 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);
 }
 
@@ -189,14 +240,14 @@ a {
 }
 
 @media (hover: hover) {
-  .ajui-button--primary:not([disabled]):hover,
-  .ajui-icon-button:not([disabled]):hover,
-  .ajui-link-default:hover {
+  .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]):hover,
-  .ajui-button--secondary:not([disabled]):hover {
+  .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);
   }
 }
@@ -206,6 +257,7 @@ a {
   outline: 0px solid transparent;
   border: none;
   background-color: inherit;
+  color: inherit;
   padding: 0.75rem 0.5rem;
   font-size: 1rem;
   font-weight: 400;
@@ -234,6 +286,7 @@ a {
 
 /* Select */
 .ajui-select-base {
+  color: inherit;
   outline: 0px solid transparent;
   border: none;
   background-color: inherit;
@@ -251,27 +304,25 @@ a {
 }
 
 /* Modal */
-.ajui-modal-backdrop {
+.ajui-layer-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: var(--ajui-modal-backdrop-background);
   z-index: 10000;
+  background: var(--ajui-layer-backdrop-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .ajui-modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   background: var(--ajui-default-background);
-  z-index: 10001;
   box-shadow: inset 0 0 0 1px var(--ajui-default-border);
   border-radius: var(--ajui-rounded-radius);
-  min-width: 50vw;
-  max-width: 90vw;
+  min-width: 50%;
+  max-width: 90%;
 }
 
 .ajui-modal-close {