@adamjanicki/ui 1.5.4 → 1.5.6

package/components/InlineCode/index.d.ts

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

package/components/InlineCode/index.js

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

package/components/Input/IconInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { InputProps } from "./Input";
-import { CornerType } from "../../types";
+import type { CornerType, Style } from "../../types";
 type IconInputProps = {
     /**
      * [Optional] Icon to display at the start of the input
@@ -17,7 +17,7 @@ type IconInputProps = {
     /**
      * [Optional] Inline styles to add to the container
      */
-    style?: React.CSSProperties;
+    style?: Style;
     /**
      * [Optional] Corner style for the input
      */

package/components/Input/IconInput.js

@@ -14,6 +14,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var IconInput = forwardRef(function (_a, ref) {
     var startIcon = _a.startIcon, endIcon = _a.endIcon, className = _a.className, style = _a.style, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, inputProps = _a.inputProps;
-    return (_jsxs("div", { className: classNames("ajui-input-default ajui-icon-input corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon || null] }));
+    return (_jsxs("div", { className: classNames("ajui-input-default ajui-icon-input ajui-corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base ajui-corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon || null] }));
 });
 export default IconInput;

package/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../types";
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     /**
      * Type of corners on the input

package/components/Input/Input.js

@@ -25,6 +25,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var Input = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, props = __rest(_a, ["className", "corners"]);
-    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default corners--".concat(corners), className) })));
+    return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default ajui-corners--".concat(corners), className) })));
 });
 export default Input;

package/components/Input/TextArea.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../types";
+import type { CornerType } from "../../types";
 type TextAreaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     /**
      * Type of corners on the text area

package/components/Input/TextArea.js

@@ -25,6 +25,6 @@ import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
 var TextArea = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, props = __rest(_a, ["className", "rows", "corners"]);
-    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default corners--".concat(corners), className), rows: rows })));
+    return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default ajui-corners--".concat(corners), className), rows: rows })));
 });
 export default TextArea;

package/components/Layer/Layer.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-type Props = {
+import type { DivProps } from "../../types";
+type Props<T extends React.ElementType> = Omit<DivProps, "children"> & {
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -8,15 +9,7 @@ type Props = {
      * The child of the layer.
      * IMPORTANT: the child must be able to accept a ref
      */
-    children: React.ReactElement;
-    /**
-     * [Optional] Additional class name
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles
-     */
-    style?: React.CSSProperties;
+    children: React.ReactElement<React.ComponentPropsWithRef<T>>;
     /**
      * [Optional] Whether to disable the escape key to close the layer
      * @default false
@@ -33,5 +26,5 @@ type Props = {
      */
     disableScrollLock?: boolean;
 };
-declare const Layer: ({ returnFocusOnEscape, disableScrollLock, ...props }: Props) => JSX.Element;
+declare const Layer: <T extends React.ElementType>({ returnFocusOnEscape, disableScrollLock, ...props }: Props<T>) => React.JSX.Element;
 export default Layer;

package/components/Layer/Layer.js

@@ -45,7 +45,7 @@ var BaseLayer = function (_a) {
             onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();
-                (_b = (_a = children.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
         }) }));
 };

package/components/Link/Link.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href">;
-export type CustomLinkElement = (props: Partial<BuiltinLinkProps> & {
+export type CustomLinkElement = React.ForwardRefExoticComponent<BuiltinLinkProps & {
     to: string;
-} & {
-    ref?: React.MutableRefObject<HTMLAnchorElement>;
-}) => React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
 type DefaultLinkProps = BuiltinLinkProps & {
     /**
      * URL to navigate to

package/components/Link/Link.js

@@ -28,8 +28,8 @@ var DefaultLinkElement = forwardRef(function (_a, ref) {
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));
 });
 export var UnstyledLink = forwardRef(function (_a, ref) {
-    var _b = _a.LinkElement, LinkElement = _b === void 0 ? DefaultLinkElement : _b, props = __rest(_a, ["LinkElement"]);
-    return (_jsx(LinkElement, __assign({}, props, { ref: ref })));
+    var _b = _a.LinkElement, LinkElement = _b === void 0 ? DefaultLinkElement : _b, className = _a.className, props = __rest(_a, ["LinkElement", "className"]);
+    return (_jsx(LinkElement, __assign({}, props, { className: classNames("ajui-action", className), ref: ref })));
 });
 var Link = forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);

package/components/Select/Select.d.ts

@@ -1,17 +1,10 @@
 import React from "react";
-import { CornerType } from "../../types";
-type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "aria-label"> & {
+import type { CornerType } from "../../types";
+type Props = React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> & {
     /**
      * Array of options to display in the select
      */
     options: string[];
-    /**
-     * Mapper function to get the value of the option
-     *
-     * @param option the option to get the value of
-     * @returns the value of the option
-     */
-    getOptionValue?: (option: string) => string;
     /**
      * Mapper function to get the label of the option
      *
@@ -24,10 +17,6 @@ type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectE
      * @default "rounded"
      */
     corners?: CornerType;
-    /**
-     * Name of the select for accessibility purposes
-     */
-    "aria-label": string;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default _default;

package/components/Select/Select.js

@@ -23,9 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "../../functions/classNames";
-var identity = function (x) { return x; };
 var Select = function (_a, ref) {
-    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, style = _a.style, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "disabled"]);
-    return (_jsxs("div", { className: classNames("ajui-select-container", "corners--".concat(corners), disabled ? "ajui-select-disabled" : undefined, className) || undefined, style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "ajui-select-base corners--".concat(corners), disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
+    var className = _a.className, options = _a.options, getOptionLabel = _a.getOptionLabel, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, style = _a.style, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionLabel", "corners", "style", "disabled"]);
+    return (_jsxs("div", { className: classNames("ajui-select-container", "ajui-corners--".concat(corners), disabled ? "ajui-select-disabled" : undefined, className), style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: "ajui-select-base ajui-corners--".concat(corners), disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: option, children: (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || option }, index)); }) })), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
 };
 export default forwardRef(Select);

package/components/Spinner/Spinner.d.ts

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

package/functions/scrollToId.js

@@ -12,6 +12,6 @@ export default function scrollToId(id, behavior) {
         }
     }
     catch (_a) {
-        // do nothing
+        return;
     }
 }

package/hooks/useFocusTrap.d.ts

@@ -5,5 +5,5 @@
  * `true` by default
  * @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>;
+declare const useFocusTrap: <T extends HTMLElement>(isActive?: boolean) => import("react").RefObject<T | null>;
 export default useFocusTrap;

package/index.d.ts

@@ -1,17 +1,21 @@
-export * from "./components/Button";
-export { default as Button } from "./components/Button";
-export * from "./components/Link";
-export { default as Link } from "./components/Link";
-export * from "./components/Input";
-export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
-export * from "./components/Hamburger";
-export { default as Hamburger } from "./components/Hamburger";
-export { default as Select } from "./components/Select";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
+export { default as Hamburger } from "./components/Hamburger";
+export * from "./components/Hamburger";
+export { default as InlineCode } from "./components/InlineCode";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
+export { default as Link } from "./components/Link";
+export * from "./components/Link";
+export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";
+export * from "./functions";
+export * from "./types";

package/index.js

@@ -1,19 +1,25 @@
 // Components
-export * from "./components/Button";
-export { default as Button } from "./components/Button";
-export * from "./components/Link";
-export { default as Link } from "./components/Link";
-export * from "./components/Input";
-export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";
 export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
-export * from "./components/Hamburger";
-export { default as Hamburger } from "./components/Hamburger";
-export { default as Select } from "./components/Select";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as Carousel } from "./components/Carousel";
 export { default as ClickOutside } from "./components/ClickOutside";
+export { default as Hamburger } from "./components/Hamburger";
+export * from "./components/Hamburger";
+export { default as InlineCode } from "./components/InlineCode";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
 export { default as Layer } from "./components/Layer";
+export { default as Link } from "./components/Link";
+export * from "./components/Link";
+export { default as Select } from "./components/Select";
 export { default as Spinner } from "./components/Spinner";
 // Hooks
 export * from "./hooks";
+// Functions
+export * from "./functions";
+// Types
+export * from "./types";

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Basic UI components and hooks for React in TypeScript",
+  "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Adam Janicki",
@@ -11,39 +12,18 @@
     "url": "git+https://github.com/adamjanicki2/ui.git"
   },
   "scripts": {
-    "build": "tsc; cp src/style.css ./style.css",
     "clean": "./clean.sh",
-    "dev": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
-    "test": "jest --config jest.config.js",
-    "lint": "eslint --ext .ts,.tsx src",
-    "prepare": "npm run lint; npm test; npm run build"
+    "lint": "eslint src --max-warnings=0",
+    "build": "npm run clean && npm run lint && tsc; cp src/style.css ./style.css",
+    "prepare": "npm run build"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.1.0",
-    "@types/jest": "^29.5.8",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-css-modules": "^2.1.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "nodemon": "^3.1.4",
-    "ts-jest": "^29.2.2",
-    "typescript": "^5.2.2"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "typescript": "^5.9.2"
   }
 }