@adamjanicki/ui 1.1.2 → 1.1.4

package/components/Alert/Alert.d.ts

@@ -23,5 +23,5 @@ type Props = {
      */
     corners?: CornerType;
 };
-declare const Alert: ({ type, className, corners, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Alert: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Alert;

package/components/Alert/Alert.js

@@ -21,9 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { classNames } from "../../utils/util";
-var Alert = function (_a) {
+var Alert = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
-    return (_jsx("div", __assign({ className: classNames("ajui-alert content--".concat(type, " corners--").concat(corners), className) }, rest)));
-};
+    return (_jsx("div", __assign({ className: classNames("ajui-alert content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));
+});
 export default Alert;

package/components/Badge/Badge.d.ts

@@ -24,5 +24,5 @@ type Props = {
      */
     corners?: CornerType;
 };
-declare const Badge: ({ type, className, corners, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Badge;

package/components/Badge/Badge.js

@@ -21,9 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { classNames } from "../../utils/util";
-var Badge = function (_a) {
+var Badge = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
-    return (_jsx("div", __assign({ className: classNames("ajui-badge content--".concat(type, " corners--").concat(corners), className) }, rest)));
-};
+    return (_jsx("div", __assign({ className: classNames("ajui-badge content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));
+});
 export default Badge;

package/components/Banner/Banner.d.ts

@@ -18,5 +18,5 @@ type Props = {
      */
     style?: React.CSSProperties;
 };
-declare const Banner: ({ type, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Banner: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Banner;

package/components/Banner/Banner.js

@@ -21,9 +21,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { classNames } from "../../utils/util";
-var Banner = function (_a) {
+var Banner = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, rest = __rest(_a, ["type", "className"]);
-    return (_jsx("div", __assign({ className: classNames("content--".concat(type, " ajui-banner"), className) }, rest)));
-};
+    return (_jsx("div", __assign({ className: classNames("content--".concat(type, " ajui-banner"), className), ref: ref }, rest)));
+});
 export default Banner;

package/package.json

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

package/style.css

@@ -103,8 +103,12 @@
   --ajui-link-color: #009ef3;
 }
 
-a:not([disabled]):is(:focus-visible),
-button:not([disabled]):is(:focus-visible) {
+a:focus:not(:focus-visible) {
+  outline: none;
+}
+
+a:not([disabled]):focus-visible,
+button:not([disabled]):focus-visible {
   outline: 3px solid var(--ajui-link-color);
   outline-offset: 0;
 }
@@ -171,6 +175,7 @@ button:not([disabled]):is(:focus-visible) {
   border-width: 1px;
   font-weight: 600;
   font-size: 0.875rem;
+  width: fit-content;
 }
 
 /* Banner */