oneslash-design-system 2.0.3 → 2.0.5

package/dist/components/popover.jsx

@@ -1,9 +1,10 @@
 'use client';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, isValidElement } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { overlayHidden, overlayTransition, overlayVisible } from './sharedStyles';
 import { useOverlayTransition } from './useOverlayTransition';
+import Menu from './menu';
 export default function Popover(_a) {
     var id = _a.id, anchorEl = _a.anchorEl, open = _a.open, onClose = _a.onClose, children = _a.children;
     var _b = useState(null), popoverElement = _b[0], setPopoverElement = _b[1];
@@ -44,11 +45,17 @@ export default function Popover(_a) {
     }, []);
     if (!mounted || !hasMounted || !anchorEl)
         return null;
+    // A Menu brings its own surface (4px inset, container corners), so the
+    // popover adds none around it rather than doubling the padding and edges.
+    var isMenu = isValidElement(children) && children.type === Menu;
+    var panelClass = isMenu
+        ? ''
+        : 'bg-background-overlay dark:ring-1 dark:ring-misc-divider rounded-control shadow-overlay p-2';
     // Render popover in a portal to prevent layout shifts and positioning issues
     // dark-only edge: a ring only in dark mode, so it keeps a dark: variant (it follows whatever dark variant the app's preset/@theme defines, class-only or OS-aware)
     return createPortal(<div id={id} ref={setPopoverElement} style={styles.popper} {...attributes.popper} className="z-[var(--os-z-overlay)]" role="dialog">
       {/* Popper owns the outer transform, so the fade and scale go on this inner panel */}
-      <div className={"bg-background-overlay dark:ring-1 dark:ring-misc-divider rounded-control shadow-overlay p-2 origin-top-left\n          ".concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
+      <div className={"".concat(panelClass, " origin-top-left\n          ").concat(overlayTransition, " ").concat(visible ? overlayVisible : overlayHidden)}>
         {children}
       </div>
     </div>, document.body // Mounting the popover in the document body for isolation

package/dist/components/textField.jsx

@@ -24,15 +24,15 @@ export default function TextField(_a) {
     var colorClasses = disabled
         ? 'bg-transparent text-fg-disabled cursor-not-allowed'
         : 'bg-background-default text-fg-primary';
-    // Border: error > focus (2px offset outline, the same weight as Button) > hover > default
+    // Border: error > focus (1px offset outline, the same weight as the border) > hover > default
     var getBorderColor = function () {
         if (error) {
-            return 'border-error-main focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-error-main';
+            return 'border-error-main focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-error-main';
         }
         if (disabled) {
             return 'border-fg-disabled';
         }
-        return "border-fg-disabled\n      hover:border-fg-secondary\n      focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-fg-primary";
+        return "border-fg-disabled\n      hover:border-fg-secondary\n      focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-fg-primary";
     };
     var errorId = "".concat(id, "-error");
     // Get inputMode for mobile keyboard optimization

package/dist/components/textarea.jsx

@@ -48,15 +48,15 @@ export default function Textarea(_a) {
     var colorClasses = disabled
         ? 'bg-transparent text-fg-disabled cursor-not-allowed'
         : 'bg-background-default text-fg-primary';
-    // Border: error > focus (2px offset outline, the same weight as Button) > hover > default
+    // Border: error > focus (1px offset outline, the same weight as the border) > hover > default
     var getBorderColor = function () {
         if (error) {
-            return 'border-error-main focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-error-main';
+            return 'border-error-main focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-error-main';
         }
         if (disabled) {
             return 'border-fg-disabled';
         }
-        return "border-fg-disabled\n      hover:border-fg-secondary\n      focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-fg-primary";
+        return "border-fg-disabled\n      hover:border-fg-secondary\n      focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-fg-primary";
     };
     var containerClasses = "\n    ".concat(colorClasses, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(getBorderColor(), "\n  ");
     var errorId = "".concat(id, "-error");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",