@noya-app/noya-designsystem 0.1.9 → 0.1.10

package/dist/index.mjs

@@ -114,94 +114,104 @@ var Tooltip = memo2(function Tooltip2({ children, content }) {
 });
 
 // src/components/Button.tsx
-var ButtonElement = styled4.button(({ theme, active, disabled, variant, size: size2, flex }) => ({
-  ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.small,
-  textDecoration: "none",
-  lineHeight: "1",
-  flex: flex ?? "0 0 auto",
-  position: "relative",
-  border: "0",
-  outline: "none",
-  WebkitAppRegion: "no-drag",
-  userSelect: "none",
-  minWidth: variant === "normal" ? "31px" : void 0,
-  textAlign: "left",
-  borderRadius: "4px",
-  paddingTop: variant === "none" ? "0px" : "4px",
-  paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-  paddingBottom: variant === "none" ? "0px" : "4px",
-  paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
-  ...size2 === "large" && {
-    paddingTop: "12px",
-    paddingRight: "16px",
-    paddingBottom: "12px",
-    paddingLeft: "16px"
-  },
-  background: active ? theme.colors.primary : variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : variant === "none" || variant === "thin" ? "transparent" : theme.colors.inputBackground,
-  color: active ? "white" : theme.colors.text,
-  opacity: disabled ? 0.25 : 1,
-  "&:focus": {
-    boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
-  },
-  "&:hover": {
-    background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
-  },
-  "&:active": {
-    background: variant === "primaryGradient" ? theme.colors.primary : theme.colors.activeBackground
-  },
-  ...variant === "primary" && {
-    background: theme.colors.primary,
-    color: "white",
-    "&:hover": {
-      background: theme.colors.primaryLight
+var ButtonElement = styled4.button(
+  ({
+    theme,
+    active,
+    disabled,
+    variant,
+    size: size2,
+    flex,
+    defaultBackground = theme.colors.inputBackground
+  }) => ({
+    ...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.small,
+    textDecoration: "none",
+    lineHeight: "1",
+    flex: flex ?? "0 0 auto",
+    position: "relative",
+    border: "0",
+    outline: "none",
+    WebkitAppRegion: "no-drag",
+    userSelect: "none",
+    minWidth: variant === "normal" ? "31px" : void 0,
+    textAlign: "left",
+    borderRadius: "4px",
+    paddingTop: variant === "none" ? "0px" : "4px",
+    paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+    paddingBottom: variant === "none" ? "0px" : "4px",
+    paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
+    ...size2 === "large" && {
+      paddingTop: "12px",
+      paddingRight: "16px",
+      paddingBottom: "12px",
+      paddingLeft: "16px"
     },
-    "&:active": {
-      background: theme.colors.primary
-    }
-  },
-  ...variant === "secondary" && {
-    background: theme.colors.secondary,
-    color: "white",
-    "&:hover": {
-      background: theme.colors.secondaryLight
+    background: active ? theme.colors.primary : variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : variant === "none" || variant === "thin" ? "transparent" : defaultBackground,
+    color: active ? "white" : theme.colors.text,
+    opacity: disabled ? 0.25 : 1,
+    "&:focus": {
+      boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
     },
-    "&:active": {
-      background: theme.colors.secondary
-    }
-  },
-  ...variant === "secondaryBright" && {
-    background: "#0ab557",
-    color: "white",
     "&:hover": {
-      opacity: 0.8
+      background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
     },
     "&:active": {
-      opacity: 0.9
-    }
-  },
-  ...variant === "white" && {
-    background: "white",
-    "&:hover": {
-      opacity: 0.8
+      background: variant === "primaryGradient" || active ? theme.colors.primary : theme.colors.activeBackground
     },
-    "&:active": {
-      opacity: 0.9
+    ...variant === "primary" && {
+      background: theme.colors.primary,
+      color: "white",
+      "&:hover": {
+        background: theme.colors.primaryLight
+      },
+      "&:active": {
+        background: theme.colors.primary
+      }
+    },
+    ...variant === "secondary" && {
+      background: theme.colors.secondary,
+      color: "white",
+      "&:hover": {
+        background: theme.colors.secondaryLight
+      },
+      "&:active": {
+        background: theme.colors.secondary
+      }
+    },
+    ...variant === "secondaryBright" && {
+      background: "#0ab557",
+      color: "white",
+      "&:hover": {
+        opacity: 0.8
+      },
+      "&:active": {
+        opacity: 0.9
+      }
+    },
+    ...variant === "white" && {
+      background: "white",
+      "&:hover": {
+        opacity: 0.8
+      },
+      "&:active": {
+        opacity: 0.9
+      }
+    },
+    ...variant === "floating" && {
+      background: "white",
+      color: theme.colors.text,
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+      fontSize: "12px",
+      padding: "0px 4px"
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& *": {
+      pointerEvents: "none"
     }
-  },
-  ...variant === "floating" && {
-    background: "white",
-    color: theme.colors.text,
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-    fontSize: "12px",
-    padding: "0px 4px"
-  },
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "& *": {
-    pointerEvents: "none"
-  }
-}));
+  })
+);
 var ButtonContent = styled4.span(({ theme }) => ({
   // Line height of small text - maybe figure out better way to ensure
   // icons don't have a smaller height
@@ -225,6 +235,7 @@ var Button = forwardRef(function Button2({
   variant = "normal",
   size: size2 = "normal",
   contentStyle,
+  defaultBackground,
   onClick,
   children,
   ...rest
@@ -243,6 +254,7 @@ var Button = forwardRef(function Button2({
       disabled,
       variant,
       size: size2,
+      defaultBackground,
       onClick,
       onDoubleClick: useCallback((event) => {
         event.stopPropagation();
@@ -875,7 +887,7 @@ var styles = {
   separatorStyle: ({ theme }) => ({
     height: "1px",
     backgroundColor: theme.colors.divider,
-    margin: "4px 8px"
+    margin: "4px -4px"
   }),
   itemStyle: ({
     theme,
@@ -888,7 +900,7 @@ var styles = {
     userSelect: "none",
     cursor: "pointer",
     borderRadius: "3px",
-    padding: "4px 8px",
+    padding: "6px 8px",
     ...disabled && {
       color: theme.colors.textDisabled
     },
@@ -1019,7 +1031,16 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
   }
   const element = /* @__PURE__ */ React12.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React12.createElement(React12.Fragment, null, icon, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React12.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React12.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React12.createElement(ChevronRightIcon, null)));
   if (items && items.length > 0) {
-    return /* @__PURE__ */ React12.createElement(DropdownMenuRoot, { isNested: true, items, onSelect }, element);
+    return /* @__PURE__ */ React12.createElement(
+      DropdownMenuRoot,
+      {
+        isNested: true,
+        items,
+        onSelect,
+        alignOffset: -5
+      },
+      element
+    );
   } else {
     return element;
   }
@@ -1034,7 +1055,12 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
   shouldBindKeyboardShortcuts,
   onOpenChange,
   open,
-  onCloseAutoFocus
+  onCloseAutoFocus,
+  side,
+  sideOffset = 4,
+  align,
+  alignOffset,
+  collisionPadding = 8
 }, forwardedRef) {
   const hasCheckedItem = items.some(
     (item) => item !== SEPARATOR_ITEM && item.checked
@@ -1051,9 +1077,12 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
   return /* @__PURE__ */ React12.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React12.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React12.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React12.createElement(
     ContentComponent,
     {
-      sideOffset: 4,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
       style: contentStyle,
-      collisionPadding: 8,
+      collisionPadding,
       ...{ onCloseAutoFocus }
     },
     items.map(