@adamjanicki/ui 1.4.9 → 1.5.1

package/components/Button/Button.d.ts

@@ -36,6 +36,11 @@ type ButtonProps = DefaultButtonProps & {
      * @default "rounded"
      */
     corners?: CornerType;
+    /**
+     * [Optional] Size of the button, if wishing to make smaller
+     * @default "regular"
+     */
+    size?: "regular" | "small";
 };
 export declare const UnstyledButton: React.ForwardRefExoticComponent<Omit<DefaultButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/Button/Button.js

@@ -37,7 +37,7 @@ export var IconButton = forwardRef(function (_a, ref) {
     return (_jsx(UnstyledButton, __assign({}, props, { className: classNames("ajui-icon-button", className), ref: ref, children: icon })));
 });
 var Button = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, className = _a.className, rest = __rest(_a, ["variant", "corners", "className"]);
-    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames("ajui-button-default ajui-button--".concat(variant, " corners--").concat(corners), className), ref: ref })));
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, className = _a.className, _d = _a.size, size = _d === void 0 ? "regular" : _d, rest = __rest(_a, ["variant", "corners", "className", "size"]);
+    return (_jsx(UnstyledButton, __assign({}, rest, { className: classNames("ajui-button--".concat(variant, " ajui-button-size--").concat(size, " corners--").concat(corners), className), ref: ref })));
 });
 export default Button;

package/package.json

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

package/style.css

@@ -107,11 +107,11 @@ 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;
+a,
+button {
+  outline-color: var(--ajui-link-color);
 }
+
 .ajui-input-default:not([disabled]):focus-within,
 .ajui-select-container:not([disabled]):focus-within {
   outline: 3px solid var(--ajui-focus-ring-color);
@@ -204,10 +204,16 @@ a {
   font-weight: 500;
 }
 
-.ajui-button-default {
+.ajui-button-size--regular {
   padding: 0.5rem 1rem;
 }
 
+.ajui-button-size--small {
+  padding: 4px 6px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .ajui-icon-button {
   display: flex;
   justify-content: center;
@@ -243,14 +249,14 @@ a {
 }
 
 @media (hover: 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) {
+  .ajui-button--primary:not([disabled]):hover,
+  .ajui-icon-button:not([disabled]):hover,
+  .ajui-link-default:hover {
     opacity: var(--ajui-default-opacity-dim);
   }
 
-  .ajui-button--transparent:not([disabled]):is(:hover, :focus-visible),
-  .ajui-button--secondary:not([disabled]):is(:hover, :focus-visible) {
+  .ajui-button--transparent:not([disabled]):hover,
+  .ajui-button--secondary:not([disabled]):hover {
     box-shadow: inset 0 0 0 1px var(--ajui-button-secondary-border-hover);
   }
 }