@uxf/ui 1.0.0-beta.111 → 1.0.0-beta.112

package/css/file-input.css

@@ -1,6 +1,6 @@
 .uxf-file-input {
     &__input {
-        @apply hidden;
+        @apply sr-only;
     }
 
     &__label {
@@ -10,6 +10,18 @@
             @apply cursor-not-allowed;
         }
 
+        &.is-focused {
+            @apply ring ring-2 ring-offset-2;
+
+            :root .light & {
+                @apply ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply ring-primary-500;
+            }
+        }
+
         &.is-invalid {
             .uxf-file-input__label__button,
             .uxf-file-input__label__wrapper {

package/css/flash-messages.css

@@ -2,12 +2,12 @@
     @apply pointer-events-none fixed inset-0 z-50 flex items-end p-6;
 
     &__list-wrapper {
-        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-end sm:justify-end;
+        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-start sm:justify-start;
     }
 }
 
 .uxf-flash-message {
-    @apply pointer-events-auto rounded-2xl transition px-3 py-4 text-center shadow backdrop-blur
+    @apply pointer-events-auto rounded-lg transition px-5 py-4 shadow backdrop-blur text-sm min-w-[15rem]
         is-hoverable:cursor-pointer;
 
     &--success {

package/flash-messages/flash-messages.stories.js

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const flash_messages_1 = require("./flash-messages");
 const flash_messages_service_1 = require("./flash-messages-service");
-const button_1 = require("@uxf/ui/button");
-const icon_1 = require("@uxf/ui/icon");
 exports.default = {
     title: "UI/FlashMessages",
     component: flash_messages_1.FlashMessages,
@@ -17,29 +17,34 @@ function Default() {
     return (react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 24 }),
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
                     react_1.default.createElement("span", null, "Everything is alright."))),
             }) }, "Click to fire Flash message, variant success"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 24 }),
+                    react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 20 }),
                     react_1.default.createElement("span", null, "Seems like an error occurred :)"))),
                 autoDismiss: false,
                 variant: "error",
             }) }, "AutoDismiss: false Flash message, variant error"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "clock", size: 24 }),
+                    react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }),
                     react_1.default.createElement("span", null, "You should better watch out :)"))),
                 autoDismiss: false,
                 variant: "warning",
             }) }, "Flash message, variant warning"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
-                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 24 }),
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
                     react_1.default.createElement("span", null, "Just letting you know"))),
                 autoDismiss: false,
                 variant: "info",
-            }) }, "Flash message, variant info")));
+            }) }, "Flash message, variant info"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: "Small",
+                autoDismiss: false,
+                variant: "info",
+            }) }, "Small flash message")));
 }
 exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.111",
+  "version": "1.0.0-beta.112",
   "description": "",
   "publishConfig": {
     "access": "public"

package/tooltip/tooltip.js

@@ -24,8 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const react_1 = require("@floating-ui/react");
-const react_2 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const use_tooltip_1 = require("./use-tooltip");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
@@ -37,25 +36,19 @@ const STATIC_SIDES = {
 };
 exports.Tooltip = (0, forwardRef_1.forwardRef)("Tooltip", ({ children, content, ...options }, ref) => {
     var _a, _b, _c, _d;
-    const arrowRef = (0, react_2.useRef)(null);
+    const arrowRef = (0, react_1.useRef)(null);
     const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
-    const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([
-        (0, react_1.useHover)(tooltip.context, { delay: 200, handleClose: (0, react_1.safePolygon)() }),
-        (0, react_1.useFocus)(tooltip.context),
-        (0, react_1.useRole)(tooltip.context, { role: "tooltip" }),
-        (0, react_1.useDismiss)(tooltip.context),
-    ]);
     const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
     const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
     const staticSide = STATIC_SIDES[tooltip.placement.split("-")[0]];
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.reference, children.ref), [ref, tooltip.reference, children]);
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        (0, react_2.cloneElement)(children, getReferenceProps({
+    const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, tooltip.reference, children.ref), [ref, tooltip.reference, children]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, react_1.cloneElement)(children, tooltip.getReferenceProps({
             ref: stableRef,
             ...children.props,
             "data-state": tooltip.open ? "open" : "closed",
         })),
-        tooltip.open && (react_2.default.createElement("div", { ...getFloatingProps({
+        tooltip.open && (react_1.default.createElement("div", { ...tooltip.getFloatingProps({
                 ref: tooltip.floating,
                 style: {
                     position: tooltip.strategy,
@@ -66,7 +59,7 @@ exports.Tooltip = (0, forwardRef_1.forwardRef)("Tooltip", ({ children, content,
                 className: "uxf-tooltip__content",
             }) },
             content,
-            react_2.default.createElement("div", { className: "uxf-tooltip__arrow", ref: arrowRef, style: {
+            react_1.default.createElement("div", { className: "uxf-tooltip__arrow", ref: arrowRef, style: {
                     height: "16px",
                     left: arrowX !== undefined ? `${arrowX}px` : "",
                     position: "absolute",

package/tooltip/use-tooltip.js

@@ -19,12 +19,11 @@ function useTooltip(options) {
         ],
     });
     const context = data.context;
-    const hover = (0, react_2.useHover)(context, {
-        move: false,
-    });
-    const dismiss = (0, react_2.useDismiss)(context);
+    const hover = (0, react_2.useHover)(context, { delay: 200, handleClose: (0, react_2.safePolygon)(), move: false });
+    const focus = (0, react_2.useFocus)(context);
     const role = (0, react_2.useRole)(context, { role: "tooltip" });
-    const interactions = (0, react_2.useInteractions)([hover, dismiss, role]);
+    const dismiss = (0, react_2.useDismiss)(context);
+    const interactions = (0, react_2.useInteractions)([hover, focus, dismiss, role]);
     return (0, react_1.useMemo)(() => ({
         open,
         setOpen,