@adamjanicki/ui 1.4.6 → 1.4.8

package/components/Hamburger/Hamburger.d.ts

@@ -4,6 +4,10 @@ export type Props = {
      * @default 36
      */
     size?: number;
+    /**
+     * Line height of the bars in pixels
+     */
+    lineHeight?: number;
     /**
      * Direction the animation originates from;
      * play around with this to see how it affects the animation because some of the animations are complicated

package/components/Hamburger/Hamburger.js

@@ -32,8 +32,8 @@ export var flipAngles = {
     left: -225,
 };
 var Hamburger = function (props) {
-    var _a = props.size, size = _a === void 0 ? 36 : _a, _b = props.duration, duration = _b === void 0 ? 0.25 : _b, double = props.double, openStyle = props.openStyle, open = props.open, style = props.style, rounded = props.rounded, buttonProps = __rest(props, ["size", "duration", "double", "openStyle", "open", "style", "rounded"]);
-    var lineHeight = Math.max(1, Math.round(size / 20));
+    var _a = props.size, size = _a === void 0 ? 36 : _a, _b = props.duration, duration = _b === void 0 ? 0.25 : _b, double = props.double, openStyle = props.openStyle, open = props.open, style = props.style, rounded = props.rounded, inputLineHeight = props.lineHeight, buttonProps = __rest(props, ["size", "duration", "double", "openStyle", "open", "style", "rounded", "lineHeight"]);
+    var lineHeight = inputLineHeight || Math.max(1, Math.round(size / 20));
     var buttonStyle = {
         width: size,
         height: size,
@@ -48,7 +48,7 @@ var Hamburger = function (props) {
         width: size * 0.7,
         backgroundColor: "currentColor",
         position: "absolute",
-        transition: "all ".concat(duration, "s ease"),
+        transition: "transform ".concat(duration, "s ease, opacity ").concat(duration, "s ease"),
         borderRadius: rounded ? 10000 : 0,
     };
     var yTranslateMagnitude = useMemo(function () { return size / (double ? 7 : 4); }, [size, double]);

package/components/Select/Select.d.ts

@@ -28,14 +28,6 @@ type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectE
      * Name of the select for accessibility purposes
      */
     "aria-label": string;
-    /**
-     * [Optional] The styles to apply to the select element
-     */
-    innerStyle?: React.CSSProperties;
-    /**
-     * [Optional] The class name to apply to the select element
-     */
-    innerClassName?: string;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default _default;

package/components/Select/Select.js

@@ -25,7 +25,7 @@ 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, innerStyle = _a.innerStyle, innerClassName = _a.innerClassName, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "innerStyle", "innerClassName", "disabled"]);
-    return (_jsxs("div", { className: classNames("ajui-select-container", disabled ? "ajui-select-disabled" : undefined, className) || undefined, style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: classNames("ajui-select-base corners--".concat(corners), innerClassName), style: innerStyle, 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, _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" }) })] }));
 };
 export default forwardRef(Select);

package/package.json

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

package/style.css

@@ -113,7 +113,7 @@ button:not([disabled]):focus-visible {
   outline-offset: 0;
 }
 .ajui-input-default:not([disabled]):focus-within,
-.ajui-select-base:not([disabled]):focus-within {
+.ajui-select-container:not([disabled]):focus-within {
   outline: 3px solid var(--ajui-focus-ring-color);
   outline-offset: 0;
 }
@@ -298,6 +298,10 @@ a {
   position: relative;
   padding: 0;
   width: fit-content;
+  transition: outline var(--ajui-default-transition);
+  outline: 0px solid transparent;
+  box-shadow: inset 0 0 0 1px var(--ajui-select-border);
+  background-color: inherit;
 }
 
 .ajui-select-disabled {
@@ -308,16 +312,14 @@ a {
 .ajui-select-base {
   width: 100%;
   color: inherit;
-  outline: 0px solid transparent;
   border: none;
+  outline: none;
+  box-shadow: none;
   cursor: pointer;
   background-color: inherit;
   padding: 0.75rem 1.75rem 0.75rem 0.5rem;
   font-size: 1rem;
   font-weight: 400;
-  transition: outline var(--ajui-default-transition);
-  outline: 0px solid transparent;
-  box-shadow: inset 0 0 0 1px var(--ajui-select-border);
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;